diff --git a/src/content/examples/en/14_Loading_And_Saving_Data/03_Load_Multiple_Images/description.mdx b/src/content/examples/en/14_Loading_And_Saving_Data/03_Load_Multiple_Images/description.mdx index 3137578181..9586a224a0 100644 --- a/src/content/examples/en/14_Loading_And_Saving_Data/03_Load_Multiple_Images/description.mdx +++ b/src/content/examples/en/14_Loading_And_Saving_Data/03_Load_Multiple_Images/description.mdx @@ -5,7 +5,7 @@ title: Load Multiple Images with Promise.all oneLineDescription: Load multiple files at the same time before drawing on canvas. --- -Use [`async/await`](https://beta.p5js.org/reference/p5/async_await/) keywords +Use [`async/await`](https://p5js.org/reference/p5/async_await/) keywords together with [`Promise.all()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) to load multiple images together. This can speed up sketch loading, because the images will be loaded at the same time, instead of one after the other. The images are drawn together on the canvas only after they all finish loading. Using multiple calls to `loadImage()` inside a `Promise.all()` works with other functions that load resources. For example, `loadFont()` in this [video tutorial on Typography and Asset Loading](https://www.youtube.com/watch?v=nT0Kzp7caGg&list=PLMVpERuYgvuh7SxJiKfTJAa2LjZ2HEWqo&index=7) by Qianqian Ye. diff --git a/src/content/tutorials/en/intro-to-p5-strands.mdx b/src/content/tutorials/en/intro-to-p5-strands.mdx index 2d008a9a8b..e1e70624e5 100644 --- a/src/content/tutorials/en/intro-to-p5-strands.mdx +++ b/src/content/tutorials/en/intro-to-p5-strands.mdx @@ -26,7 +26,7 @@ import Callout from "../../../components/Callout/index.astro"; **p5.strands** is a new way of writing shaders using JavaScript in p5.js. While many shader effects *could* be created with the p5.js 2D renderer, shaders are best for applying complex effects to many objects. Like any medium, shaders also offer their own creative possibilities! -Before p5.js 2.0, you could already use [GLSL](https://beta.p5js.org/tutorials/intro-to-glsl/) to write shaders. Shaders run in parallel on the GPU to create visual effects. The GPU can run many similar operations in parallel, much more quickly than the CPU. +Before p5.js 2.0, you could already use [GLSL](https://p5js.org/tutorials/intro-to-glsl/) to write shaders. Shaders run in parallel on the GPU to create visual effects. The GPU can run many similar operations in parallel, much more quickly than the CPU. When you write a p5.js sketch, you are giving the CPU a sequence of instructions. When you add a shader - using p5.strands or GLSL - you are giving instructions to the GPU to run many times at once, simultaneously. For example, in a fragment shader, that means many calculations for each pixel. @@ -612,7 +612,7 @@ const ogImage = uniformTexture(originalImage) This line does two things, representing the two halfs of a bridge between your sketch and your shader: 1. It declares a uniform variable in the shader called `ogImage` which expects to receive a value from outside the shader. -2. It causes your sketch to set that uniform variable **every frame** using [setUniform()](https://beta.p5js.org/reference/p5.Shader/setUniform/) on the shader, passing the value of `originalImage`. +2. It causes your sketch to set that uniform variable **every frame** using [setUniform()](https://p5js.org/reference/p5.Shader/setUniform/) on the shader, passing the value of `originalImage`. Here's our `bloomCallback` function with this original canvas image being received by the shader and sampled from: