Update p5.js to v2.0.1

github-actions[bot] · github-actions[bot] · commit ac2f5f69e501 · 2025-04-23T18:16:10.000Z
diff --git a/public/reference/data.json b/public/reference/data.json
diff --git a/public/search-indices/en.json b/public/search-indices/en.json
diff --git a/public/search-indices/es.json b/public/search-indices/es.json
diff --git a/public/search-indices/hi.json b/public/search-indices/hi.json
diff --git a/public/search-indices/ko.json b/public/search-indices/ko.json
diff --git a/public/search-indices/zh-Hans.json b/public/search-indices/zh-Hans.json
diff --git a/src/content/reference/en/p5.Font/textToContours.mdx b/src/content/reference/en/p5.Font/textToContours.mdx
@@ -59,7 +59,7 @@ example:
 
     async function setup() {
       createCanvas(100, 100);
-      font = await loadFont('/assets/inconsolata.otf');
+      font = await loadFont('//assets/inconsolata.otf');
     }
 
     function draw() {
diff --git a/src/content/reference/en/p5.Graphics/createFramebuffer.mdx b/src/content/reference/en/p5.Graphics/createFramebuffer.mdx
@@ -67,7 +67,7 @@ description: >
   are set, they won't
 
   automatically match the graphics buffer and must be changed manually.</p>
-line: 555
+line: 556
 isConstructor: false
 itemtype: method
 example:
diff --git a/src/content/reference/en/p5.Graphics/remove.mdx b/src/content/reference/en/p5.Graphics/remove.mdx
@@ -29,7 +29,7 @@ description: >
   variable still refers to the graphics buffer, then it won't be garbage
 
   collected.</p>
-line: 308
+line: 309
 isConstructor: false
 itemtype: method
 example:
diff --git a/src/content/reference/en/p5.Graphics/reset.mdx b/src/content/reference/en/p5.Graphics/reset.mdx
@@ -13,7 +13,7 @@ description: >
 
   objects must reset these values manually by calling
   <code>myGraphics.reset()</code>.</p>
-line: 241
+line: 242
 isConstructor: false
 itemtype: method
 example:
diff --git a/src/content/reference/en/p5/async_await.mdx b/src/content/reference/en/p5/async_await.mdx
@@ -0,0 +1,146 @@
+---
+title: async_await
+module: Foundation
+submodule: Foundation
+file: src/core/reference.js
+description: >-
+  <p>Asynchronous Asset Loading with Async/Await.</p>
+
+  <p>The keywords <code>async</code> and <code>await</code> let you write
+  asynchronous code in a more
+
+  straightforward, linear style. Instead of nesting callbacks or juggling
+
+  multiple promise chains, you can pause execution at <code>await</code> while
+  waiting
+
+  for a promise to resolve. This makes your code flow more naturally, as if
+
+  it were synchronous.</p>
+
+  <p>When you mark a function with the <code>async</code> keyword—like
+  <code>async function setup() {...}</code>—it
+
+  signals that the function contains asynchronous operations and will return a
+
+  promise. Any time you use the <code>await</code> keyword inside this function,
+  JavaScript
+
+  will pause the function’s execution until the awaited promise settles.</p>
+
+  <p>In p5.js, you can use <code>async/await</code> to handle media loading
+  functions such as
+
+  <code>loadImage()</code>, <code>loadJSON()</code>, <code>loadSound()</code>,
+  and so on. This allows you to:</p>
+
+  <ul><li>load files in a more readable, top-to-bottom manner</li><li>decide
+  when the assets are fully available before proceeding</li></ul><p>Nested
+  callbacks require managing additional information and behavior.
+
+  Lazy loading of assets with <code>async/await</code> can simplify control
+  flow,
+
+  but it also requires you to design your sketch around waiting for
+
+  each operation to complete.</p>
+
+  <p>Callbacks are still fully supported, so code that passes success / error
+
+  functions to loaders like <code>loadImage()</code> or <code>loadJSON()</code>
+  will behave exactly
+
+  as it always has. This compatibility means sketches written with the older
+
+  pattern don’t need any changes, and you can freely mix callbacks and
+
+  <code>async/await</code> in the same project if that suits your workflow.</p>
+
+  <p>In the example below, <code>setup()</code> is declared as an async
+  function. We <code>await</code>
+
+  the completion of both <code>loadImage()</code> and <code>loadJSON()</code>
+  before calling
+
+  <code>createCanvas()</code>. Only then does the sketch proceed, guaranteeing
+  the assets
+
+  are available for immediate use.</p>
+
+  <pre><code class="language-js">let img, data;
+
+
+  async function setup() {
+    // Wait until the image and JSON data have fully loaded.
+    img = await loadImage("./my-image.png");
+    data = await loadJSON("./my-data.json");
+
+    // Once the assets are loaded, create the canvas.
+    createCanvas(400, 400);
+  }</code></pre>
+line: 1
+isConstructor: false
+itemtype: property
+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.
+    async function setup() {
+      shape = await loadModel('//assets/teapot.obj');
+
+      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>
+    let font;
+
+    async function setup() {
+      // Load a font for WebGL mode.
+      font = await loadFont('/assets/inconsolata.otf');
+
+      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
+---
+
+
+# async\_await
diff --git a/src/content/reference/en/p5/disableFriendlyErrors.mdx b/src/content/reference/en/p5/disableFriendlyErrors.mdx
@@ -18,7 +18,7 @@ description: >
   which takes time to process. Disabling the FES can significantly improve
 
   performance by turning off these checks.</p>
-line: 671
+line: 675
 isConstructor: false
 itemtype: property
 example:
diff --git a/src/content/reference/en/p5/draw.mdx b/src/content/reference/en/p5/draw.mdx
@@ -43,7 +43,7 @@ description: >
   be resumed by
 
   calling the <a href="/reference/p5/loop/">loop()</a> function.</p>
-line: 671
+line: 675
 isConstructor: false
 itemtype: method
 example:
diff --git a/src/content/reference/en/p5/keyIsDown.mdx b/src/content/reference/en/p5/keyIsDown.mdx
@@ -26,7 +26,7 @@ description: >
   <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: 932
+line: 935
 isConstructor: false
 itemtype: method
 example:
diff --git a/src/content/reference/en/p5/keyTyped.mdx b/src/content/reference/en/p5/keyTyped.mdx
@@ -61,7 +61,7 @@ description: >
   the end
 
   of the function.</p>
-line: 794
+line: 797
 isConstructor: false
 itemtype: method
 example:
diff --git a/src/content/reference/en/p5/millis.mdx b/src/content/reference/en/p5/millis.mdx
@@ -17,15 +17,15 @@ description: >
   <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
+  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
+  sketch includes asynchronous loading using
+  <code>async</code>/<code>await</code>, then
 
-  <code>millis()</code> begins tracking time as soon as the code in
+  <code>millis()</code> begins tracking time as soon as the asynchronous code
 
-  <a href="/reference/p5/preload/">preload()</a> starts running.</p>
-line: 229
+  starts running.</p>
+line: 228
 isConstructor: false
 itemtype: method
 example:
diff --git a/src/content/reference/en/p5/month.mdx b/src/content/reference/en/p5/month.mdx
@@ -4,7 +4,7 @@ module: IO
 submodule: Time & Date
 file: src/utilities/time_date.js
 description: Returns the current month as a number from 1–12.
-line: 268
+line: 267
 isConstructor: false
 itemtype: method
 example:
diff --git a/src/content/reference/en/p5/p5.Graphics.mdx b/src/content/reference/en/p5/p5.Graphics.mdx
@@ -33,7 +33,7 @@ description: >
   recommended
 
   way to create an instance of this class.</p>
-line: 673
+line: 674
 isConstructor: true
 params:
   - name: w
diff --git a/src/content/reference/en/p5/p5.mdx b/src/content/reference/en/p5/p5.mdx
@@ -14,20 +14,22 @@ description: >
 
   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>,
+  its sole argument and may optionally set an asynchronous function
 
-  <a href="/reference/p5/setup/">setup()</a>, and/or
+  using <code>async/await</code>, along with the standard <a
+  href="/reference/p5/setup/">setup()</a>,
 
-  <a href="/reference/p5/draw/">draw()</a> properties on it for running a
-  sketch.</p>
+  and/or <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: 32
+line: 33
 isConstructor: true
 params:
   - name: sketch
diff --git a/src/content/reference/en/p5/remove.mdx b/src/content/reference/en/p5/remove.mdx
@@ -14,7 +14,7 @@ description: >
   created by using the <a href="/reference/p5/p5/">p5()</a> constructor, as in
 
   <code>new p5()</code>.</p>
-line: 368
+line: 370
 isConstructor: false
 itemtype: method
 example:
diff --git a/src/content/reference/en/p5/second.mdx b/src/content/reference/en/p5/second.mdx
@@ -4,7 +4,7 @@ module: IO
 submodule: Time & Date
 file: src/utilities/time_date.js
 description: Returns the current second as a number from 0–59.
-line: 303
+line: 302
 isConstructor: false
 itemtype: method
 example:
diff --git a/src/content/reference/en/p5/setup.mdx b/src/content/reference/en/p5/setup.mdx
@@ -22,13 +22,14 @@ description: >
   <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
+  run immediately after <a href="/reference/p5/preload/">preload()</a>
+  finishes</p>
 
-  loading assets.</p>
+  <p>loading assets.</p>
 
   <p>Note: <code>setup()</code> doesn’t have to be declared, but it’s common
   practice to do so.</p>
-line: 671
+line: 675
 isConstructor: false
 itemtype: method
 example:
diff --git a/src/content/reference/en/p5/vertex.mdx b/src/content/reference/en/p5/vertex.mdx
@@ -185,7 +185,7 @@ example:
     let vid;
     function setup() {
       // Load a video and create a p5.MediaElement object.
-      vid = createVideo('/assets/fingers.mov');
+      vid = createVideo('//assets/fingers.mov');
       createCanvas(100, 100, WEBGL);
 
       // Hide the video.
diff --git a/src/content/reference/en/p5/year.mdx b/src/content/reference/en/p5/year.mdx
@@ -4,7 +4,7 @@ module: IO
 submodule: Time & Date
 file: src/utilities/time_date.js
 description: Returns the current year as a number such as 1999.
-line: 337
+line: 336
 isConstructor: false
 itemtype: method
 example:
diff --git a/src/globals/p5-version.ts b/src/globals/p5-version.ts
@@ -1,2 +1,2 @@
-export const p5Version = "2.0.0" as const;
+export const p5Version = "2.0.1" as const;
 export const p5SoundVersion = "0.2.0" as const;

Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@ example:`
`59`	`59`
`60`	`60`	`async function setup() {`
`61`	`61`	`createCanvas(100, 100);`
`62`		`- font = await loadFont('/assets/inconsolata.otf');`
	`62`	`+ font = await loadFont('//assets/inconsolata.otf');`
`63`	`63`	`}`
`64`	`64`
`65`	`65`	`function draw() {`