This demonstrates a radial gradient, lerping between two colors, based on two points. It runs in a full-screen filter shader.
Gradient (p5.strands): Created 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: Code. You can suggest improvements by contributing to the current website!
相关示例
无替代文本
滤镜着色器 (p5.strands)
用着色器处理图像。
无替代文本
滤镜着色器 (GLSL)
用着色器处理图像。
无替代文本
用着色器调整位置 (p5.strands)
使用着色器调整形状顶点。
无替代文本
用着色器调整位置 (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 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.