The shader in this example uses depth information from a p5.Framebuffer to apply a blur. On a real camera, objects appear blurred if they are closer or farther than the lens’s focus. This simulates that effect. First, the sketch renders five spheres to the framebuffer. Then, it renders the framebuffer to the canvas and applies the blur shader, which is written in p5.strands.
Depth Blur (p5.strands): Created by Dave Pagurek. Revised by Caleb Foss. Remixed by Dave Pagurek. From 2026 onwards, edited and maintained by p5.js Contributors and Processing Foundation. Licensed under CC BY-NC-SA 4.0.
You can find the code history of these examples here: pre-2023 example, 2023 code, 2026 p5.strands translation. You can suggest improvements by contributing to the current website!
Related Examples
A screenshot of a video of a city crosswalk, with offset colors.
Filter Shader (p5.strands)
Manipulate imagery with a shader, written in p5.strands.
A screenshot of a video of a city crosswalk, with offset colors.
Filter Shader (GLSL)
Manipulate imagery with a shader, using GLSL.
A red-to-blue waving ribbon on a white background.
Adjusting Positions with a Shader (p5.strands)
Use a shader to adjust shape vertices, written in p5.strands.
A red-to-blue waving ribbon on a white background.
Adjusting Positions with a Shader (GLSL)
Use a shader to adjust shape vertices, using GLSL.
A gradient from red to blue.
Gradient (p5.strands)
Draw a radial gradient between two points in p5.strands.
A dithered gradient from red to blue.
Dithered Gradient (p5.strands)
Draw a dithered radial gradient between two points in p5.strands.
A row of five orange spheres. The closest and farthest spheres from the camera appear blurred.
Depth Blur (p5.strands)
Simulate a camera's depth of field, with a shader written in p5.strands.
A row of five orange spheres. The closest and farthest spheres from the camera appear blurred.
Depth Blur (GLSL)
Simulate a camera's depth of field, written in GLSL.
A city scene blurred around the edges of the frame
Variable Blur (p5.strands)
Create a blur shader with a different amount of blur at different parts of the canvas.