形状和颜色
动画和变量
导入媒体
输入元素
变换
计算值
重复
Listing Data with Arrays
角度和运动
游戏
3D
高级画布渲染
类和对象
加载和保存数据
数学和物理
Shaders
无替代文本
滤镜着色器 (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.
Sound
An image of sound waves rendered in p5.js.
Making a Beep
Creating tones with an Oscillator.
An image of sound waves rendered in p5.js.
Filtering Sound
Simulate the sound of waves and wind with white noise.
An image of sound waves rendered in p5.js.
Playing Melodies
Create melodic music using an array of pitch values.
An image of sound waves rendered in p5.js.
Echo Synth
Trigger a short sound with an echo effect.
An image of sound waves rendered in p5.js.
Sample Playback
Load a soundfile and change its properties.
An image of sound waves rendered in p5.js.
Measuring Amplitude (Visualization)
Analyze the amplitude of sound with p5.Amplitude.
An image of sound waves rendered in p5.js.
Visualizing Sound
Spectral analysis for audio-responsive animations.
An image of sound waves rendered in p5.js.
Connecting to ToneJS
Working with AudioContexts and cross-library synthesis.