Shaders can be applied to 2D/3D shapes as textures.
To learn more about using shaders in p5.js: p5.js Shaders
Shader as a Texture (GLSL): Revised by Caleb Foss. 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. You can suggest improvements by contributing to the current website!
Related Examples
Black canvas with a very dark grey rectangle in the middle. A white circle is at the edge of the rectangle.
Create Graphics
Draw imagery off-screen.
Two curving lines made of repeating white circles and squares with black outlines, on a black and white background.
Multiple Canvases
Use Instance Mode to put multiple canvases on the page.
Two spheres broken up into a square grid with a gradient in each grid.
Shader as a Texture (GLSL)
Generate a texture for a 3D shape using a shader.
Two spheres broken up into a square grid with a gradient in each grid.
Shader as a Texture (p5.strands)
Generate a texture for a 3D shape using a shader, written in p5.strands.