Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions src/content/tutorials/en/intro-to-p5-strands.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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:

Expand Down