Merge branch '2.0' into nb-strands-tut-both-simplifications

nbogie · web-flow · commit f63d660b6c8d · 2026-04-07T07:13:59.000+01:00
diff --git a/docs/url_conventions.md b/docs/url_conventions.md
@@ -36,7 +36,7 @@ Instead write (or generate) links that follow the rules above.
 
 ## Case in URLs
 
-URL casing is somewhat inconsistent across the website.  Guidelines for new resources:
+URL casing is somewhat inconsistent across the website. Guidelines for new resources:
 
 * Prefer lower-case
 * Spaces should not be used in URLs.
@@ -51,7 +51,7 @@ URL casing is somewhat inconsistent across the website.  Guidelines for new reso
 
 ### A case exception: reference pages
 
-In reference pages, the URLs follow the names of the functions, classes, and variables.  So, they include some capitals and use "camel-case" e.g. `createCanvas`.
+In reference pages, the URLs follow the names of the functions, classes, and variables. So, they include some capitals and use "camel-case" e.g. `createCanvas`.
 
 #### Examples of reference page URLs
 * https://p5js.org/reference/p5.Vector/fromAngle/
diff --git a/src/components/Footer/index.astro b/src/components/Footer/index.astro
@@ -3,6 +3,7 @@ import { getEntry } from "astro:content";
 import { getCurrentLocale, getUiTranslator } from "@/src/i18n/utils";
 import { Icon } from "../Icon";
 import Banner from "@components/Banner/index.astro";
+import { p5Version } from "@/src/globals/p5-version";
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
@@ -32,7 +33,7 @@ const bannerEntry = await getEntry("banner", currentLocale);
       <li><a href="/contribute/">{t("Contribute")}</a></li>
       <li><a href="/community/">{t("Community")}</a></li>
       <li><a href="/about/">{t("About")}</a></li>
-      <li><a href="https://editor.p5js.org">{t("Start Coding")}</a></li>
+      <li><a href={`https://editor.p5js.org?version=${p5Version}`}>{t("Start Coding")}</a></li>
       <li><a href="/donate/">{t("Donate")}</a></li>
     </ul>
   </div>
diff --git a/src/components/Nav/MainNavLinks.tsx b/src/components/Nav/MainNavLinks.tsx
@@ -1,6 +1,7 @@
 import styles from "./styles.module.scss";
 import { Logo } from "../Logo";
 import { Icon } from "../Icon";
+import { p5Version } from "@/src/globals/p5-version";
 
 type MainNavLinksProps = {
   links: {
@@ -81,7 +82,7 @@ export const MainNavLinks = ({
       </ul>
       <ul class="flex flex-col gap-[15px]">
         <li>
-          <a className={styles.buttonlink} href="https://editor.p5js.org">
+          <a className={styles.buttonlink} href={`https://editor.p5js.org?version=${p5Version}`}>
             <div class="mr-xxs">
               <Icon kind="code-brackets" />
             </div>
diff --git a/src/content/libraries/en/p5.tree.yaml b/src/content/libraries/en/p5.tree.yaml
@@ -0,0 +1,13 @@
+name: p5.tree
+description: Render pipeline for p5.js v2 — pose and camera interpolation, space transforms, frustum visibility, HUD, post-processing pipe, picking, and declarative control panels.
+category: 3d
+sourceUrl: https://github.com/VisualComputing/p5.tree
+websiteUrl: https://nakednous.github.io/tags/p5.tree/
+npm: p5.tree
+npmFilePath: dist/p5.tree.min.js
+author:
+  name: Jean Pierre Charalambos
+  url: https://nakednous.github.io/
+license: AGPL-3.0
+featuredImage: ../images/p5.tree.png
+featuredImageAlt: A non-Euclidean geometry cube with faces showcasing teapot, bunny, and Buddha models.
diff --git a/src/content/libraries/en/p5.treegl.yaml b/src/content/libraries/en/p5.treegl.yaml
diff --git a/src/content/libraries/images/p5.tree.png b/src/content/libraries/images/p5.tree.png
diff --git a/src/content/text-detail/en/download.mdx b/src/content/text-detail/en/download.mdx
@@ -11,13 +11,14 @@ import {
   p5LatestUrl,
   p5MajorVersion
 } from '@src/globals/globals'
+import { p5Version } from '@src/globals/p5-version'
 
 Welcome! This page contains the links to start using p5.js in the way that suits you best. Open the p5.js Editor in your web browser, or download the library to your own computer. We’ve tried to order the links to reflect what a beginner might want first, then what a more experienced programmer may be looking for.
 
 ### Start Coding Online
 This link redirects you to the p5.js Editor online so you can begin using p5.js immediately.
 
-<LinkButton variant='link' url='https://editor.p5js.org/'> p5.js Editor </LinkButton>
+<LinkButton variant='link' url={`https://editor.p5js.org?version=${p5Version}`}> p5.js Editor </LinkButton>
 
 ### Download the Complete Library
 This is a download containing the p5.js library file, the p5.sound addon, and an example project. It does not contain an editor. Visit [Get Started](/tutorials/get-started) to learn how to setup a p5.js project.
diff --git a/src/content/text-detail/zh-Hans/download.mdx b/src/content/text-detail/zh-Hans/download.mdx
@@ -9,13 +9,14 @@ import {
   libraryDownloadUrl,
   minifiedLibraryDownloadUrl
 } from '@src/globals/globals'
+import { p5Version } from '@src/globals/p5-version'
 
 欢迎！本页面包含了开始使用 p5.js 的各种方式的链接。您可以在网络浏览器中打开 p5.js 编辑器，或者将库下载到您的计算机上。我们按照从初学者到进阶开发者的需求顺序来组织这些链接。
 
 ### 在线开始编程
 此链接将带您前往在线 p5.js 编辑器，您可以立即开始使用 p5.js。
 
-<LinkButton variant='link' url='https://editor.p5js.org/'> p5.js 编辑器 </LinkButton>
+<LinkButton variant='link' url={`https://editor.p5js.org?version=${p5Version}`}> p5.js 编辑器 </LinkButton>
 
 ### 下载完整库
 这个下载包含了 p5.js 库文件、p5.sound 插件和一个示例项目。不包含编辑器。访问[入门指南](/tutorials/get-started)了解如何设置 p5.js 项目。
diff --git a/src/content/tutorials/en/animating-with-media-objects.mdx b/src/content/tutorials/en/animating-with-media-objects.mdx
@@ -57,8 +57,8 @@ Explore [this example](https://editor.p5js.org/joanneamarisa/sketches/PFmWqy0qB)
 ### Things you’ll need<a id="things-youll-need"></a>
 
 - A computer with access to the internet
-- An account on the  [p5.js Web Editor](https://editor.p5js.org/)
-- Four source image files to download for this tutorial: 
+- An account on the [p5.js Web Editor](https://editor.p5js.org/)
+- Four source image files to download for this tutorial:
   - [Flower 1 (PNG)](/assets/flower-1.png)
   - [Flower 2 (PNG)](/assets/flower-2.png)
   - [Flower 3 (PNG)](/assets/flower-3.png)
@@ -69,7 +69,7 @@ Explore [this example](https://editor.p5js.org/joanneamarisa/sketches/PFmWqy0qB)
   - conditional statements
   - creating custom functions with parameters
 
-For more information on these concepts see these tutorials: [Get Started](/tutorials/get-started),  [Variables and Change](/tutorials/variables-and-change), [Conditionals and Interactivity](/tutorials/conditionals-and-interactivity), and [Organizing Code with Functions](/tutorials/organizing-code-with-functions).
+For more information on these concepts see these tutorials: [Get Started](/tutorials/get-started), [Variables and Change](/tutorials/variables-and-change), [Conditionals and Interactivity](/tutorials/conditionals-and-interactivity), and [Organizing Code with Functions](/tutorials/organizing-code-with-functions).
 
 
 ## Step 1 – Upload image files to the sketch folder
@@ -85,7 +85,7 @@ For more information on these concepts see these tutorials: [Get Started](/tutor
 
 #### Image files
 
-Image files store the grid of colored pixels that make up an image. There are a number of different image file types that p5.js can process.. The most common image types are JPEGs, PNGs, or GIFs. You can identify them by the extension found at the end of their filenames: `.jpg`, `.png`, `.gif`.
+Image files store the grid of colored pixels that make up an image. There are a number of different image file types that p5.js can process. The most common image types are JPEGs, PNGs, or GIFs. You can identify them by the extension found at the end of their filenames: `.jpg`, `.png`, `.gif`.
 
 JPEGs and PNGs are among the most common types of static images, which are images that do not move. JPEGs often refer to photographs, whereas PNGs often refer to graphics and designs, as they support images with transparent backgrounds. The term GIF is widely used for animated images. They contain a series of images that can be displayed as an animation.
 
@@ -192,7 +192,7 @@ function draw() {
 
 ### [`image()`](/reference/p5/image)
 
-The `image()` function draws a `p5.Image` object on the canvas. At least three arguments are needed to call `image()`: the variable that was assigned the p5.Image object , the x-coordinate, and the y-coordinate: `image(img, x, y, width);`
+The `image()` function draws a `p5.Image` object on the canvas. At least three arguments are needed to call `image()`: the variable that was assigned the p5.Image object, the x-coordinate, and the y-coordinate: `image(img, x, y, width);`
 
 Visit the p5.js Reference on [`image()`](/reference/p5/image) to see more ways you can specify how an image is drawn.
 
@@ -345,7 +345,7 @@ function draw() {
 
 - In the `draw()` function, start a new if-statement by typing `if (mouseIsPressed) {}`
   - Any functions placed inside this if-statement’s body (between the curly braces) will only be performed while the mouse is pressed.
-- Inside the curly brackets, add a line of code: `flowerY -= 1`; 
+- Inside the curly brackets, add a line of code: `flowerY -= 1`;
   - This decrements the `flowerY` value by 1 so the flowers will move farther up the canvas while the mouse is pressed.
 - Right underneath it, add another line of code: `flowerSize += 1;`
   - This increments the `flowerSize` variable by 1 so the flower images will grow in size while the mouse is pressed.
diff --git a/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx b/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx
@@ -79,7 +79,7 @@ Final image with focal blur using color + depth
 
 A `p5.Framebuffer` is a surface you can draw to, similar to the main canvas. Drawing to the main canvas is like drawing on a sheet of paper. When you call `begin()` on a `p5.Framebuffer`, it's like laying a fresh sheet of paper on top of the original, which will collect any new things that get drawn. Calling `end()` on a `p5.Framebuffer` will remove that sheet again so that subsequent drawing will go right to the main canvas again.
 
-You can create a `p5.Framebuffer` with the `createFramebuffer()` function. You can optionally pass an object in as a parameter to specify a width and height.By default, `p5.Framebuffer`s are the same size as the main canvas. There are other options you can add to this object to control how color and depth information is stored, which we'll get into later. Check out [the `createFramebuffer()` documentation](/reference/p5/createFramebuffer/) for the full reference.
+You can create a `p5.Framebuffer` with the `createFramebuffer()` function. You can optionally pass an object in as a parameter to specify a width and height. By default, `p5.Framebuffer`s are the same size as the main canvas. There are other options you can add to this object to control how color and depth information is stored, which we'll get into later. Check out [the `createFramebuffer()` documentation](/reference/p5/createFramebuffer/) for the full reference.
 
 You may already be familiar with drawing to `p5.Graphics` objects. Here's a comparison of some code using `p5.Graphics` as a texture, and what the equivalent `p5.Framebuffer` code looks like:
 
diff --git a/src/content/tutorials/en/simple-melody-app.mdx.todo b/src/content/tutorials/en/simple-melody-app.mdx.todo
@@ -19,11 +19,11 @@ import Callout from "../../../components/Callout/index.astro";
 
 ## Introduction
 
-[Music](https://www.britannica.com/art/music) is used by cultures around the world as a way to communicate their histories, emotions and experiences by combining vocal or instrumental [sounds](https://www.britannica.com/science/sound-physics). One of music's basic elements is a [*melody:*](https://www.masterclass.com/articles/music-101-what-is-melody) a group of musical notes that form compositions of sounds that are pleasing to hear.  In this tutorial you will explore how to use [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects to generate musical notes, and develop an web application where users create melodies, and play them back!
+[Music](https://www.britannica.com/art/music) is used by cultures around the world as a way to communicate their histories, emotions and experiences by combining vocal or instrumental [sounds](https://www.britannica.com/science/sound-physics). One of music's basic elements is a [*melody:*](https://www.masterclass.com/articles/music-101-what-is-melody) a group of musical notes that form compositions of sounds that are pleasing to hear. In this tutorial you will explore how to use [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects to generate musical notes, and develop an web application where users create melodies, and play them back!
 
 This tutorial is part 1 in a series of 3 tutorials that walk you through creating different versions of a melody app. 
 
-- Part 1: In this tutorial you will develop a [simple melody app](https://editor.p5js.org/Msqcoding/sketches/w_4t5bFYe) where users can compose melodies from a musical scale, and play them back.  
+- Part 1: In this tutorial you will develop a [simple melody app](https://editor.p5js.org/Msqcoding/sketches/w_4t5bFYe) where users can compose melodies from a musical scale, and play them back.
 - Part 2: In [Getting Started with Node.js](/tutorials/getting-started-with-nodejs), you will learn how to use [Node.js](https://nodejs.org/en/about) and [Express.js](https://expressjs.com/) to route [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) requests that retrieve and play melodies saved on your computer. 
 - Part 3: In Melody App with Node.js (coming soon!), you will learn how to integrate your [simple melody app](https://editor.p5js.org/Msqcoding/sketches/w_4t5bFYe) with [Node.js](https://nodejs.org/en/about) and [Express.js](https://expressjs.com/). You will develop a more complex Melody App where users can heir melodies onto their computers, and retrieve them for playback later.
 
@@ -61,7 +61,7 @@ Skip to [Play musical notes with oscillators](#play-musical-notes-with-oscillato
 
 ### p5.Oscillator objects<a id="p5-oscillator-objects"></a>
 
-[`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects hold information to generate electrical signals called [oscillators ](https://www.techtarget.com/whatis/definition/oscillator)that can play [musical notes](https://www.simplifyingtheory.com/music-note/). These signals change between a minimum and maximum value in a pattern that repeats at a specific rate. When the signal is played through your speakers, we can hear that it generates a sound!
+[`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects hold information to generate electrical signals called [oscillators](https://www.techtarget.com/whatis/definition/oscillator) that can play [musical notes](https://www.simplifyingtheory.com/music-note/). These signals change between a minimum and maximum value in a pattern that repeats at a specific rate. When the signal is played through your speakers, we can hear that it generates a sound!
 
 To understand how oscillators generate musical notes, we can dive into some science behind [sound](https://www.britannica.com/science/sound-physics).
 
@@ -103,7 +103,7 @@ We can see in the gif above that the tuning fork vibrates the [particles of matt
 
 To get a better idea of how sound travels through matter, check out [this video](https://www.youtube.com/watch?v=px3oVGXr4mo) that demonstrates pressure waves formed by the sound of a clap!
 
-Learn more about the science behind pressure waves and sound by visiting these resources: [Particle Theory of Matter](https://letstalkscience.ca/educational-resources/backgrounders/introduction-particle-theory-matter),  [Sound as a Pressure Wave](https://www.physicsclassroom.com/class/sound/u11l1c.cfm) and [Waves and the eardrum](https://www.physicsclassroom.com/mmedia/waves/edl.cfm).
+Learn more about the science behind pressure waves and sound by visiting these resources: [Particle Theory of Matter](https://letstalkscience.ca/educational-resources/backgrounders/introduction-particle-theory-matter), [Sound as a Pressure Wave](https://www.physicsclassroom.com/class/sound/u11l1c.cfm) and [Waves and the eardrum](https://www.physicsclassroom.com/mmedia/waves/edl.cfm).
 
 
 ### 1.2 - Periodic waves and sound<a id="pressure-waves"></a>
@@ -261,7 +261,7 @@ Next, we'll enable a user to start the oscillator when they click the canvas by
 
 - Run your code. You should hear middle C play after clicking on the canvas. 
 
-If you do not hear any sounds after clicking the canvas , check that your code looks [like this](https://editor.p5js.org/Msqcoding/sketches/ObN4r-VJo). If a sound does not play, check that your browser settings allow for playing multimedia. You can use the following resources to help you:
+If you do not hear any sounds after clicking the canvas, check that your code looks [like this](https://editor.p5js.org/Msqcoding/sketches/ObN4r-VJo). If a sound does not play, check that your browser settings allow for playing multimedia. You can use the following resources to help you:
 
 - [Chrome Settings](https://support.google.com/chrome/answer/9692215?hl=en)
 - [Safari Settings](https://testgenius.com/help/safari-enable-auto-play-settings.pdf)
diff --git a/src/content/tutorials/en/speak-with-your-hands.mdx.todo b/src/content/tutorials/en/speak-with-your-hands.mdx.todo
