p5.js Shader Examples

A collection of heavily commented 2d shaders in p5.js. I tried to write shaders that might be useful for those learning GLSL and wanting to get into the basics of 2d image manipulation. For now these are only 2d / texture shaders.

Shader functions in p5

There are only 4 functions you need to know to work with shaders in p5.js. Everything else is just learning the shader language GLSL.

1. loadShader('vertexShader.vert', 'fragmentShader.frag') loads your shaders from files and returns them as a p5 shader object in a variable. The file extensions don't really matter, you can call them .glsl or .shader or .vertex. What does matter is that the path to the files is correct. loadShader() should be called from within preload().

2. createShader(vertString, fragString) loads your shaders from strings. I prefer not to work this way because you won't have any syntax highlighting on your shaders. You can call this method from within setup. The easiest way to write shaders as strings is probably to use javascripts template string syntax.

3. shader(myShader) sets the currently active shader. You can also call this function on createGraphics() layers if you have them in your scene.

4. setUniform('uniformName', dataGoingToShader) is the only method of the shader object in p5. You can use it to send data to your shaders from your p5 program. For the vec# data types, you send the data as an array. Here's how to send different types of data

// sending an int
myShader.setUniform('myInt', 2);

// sending a float
myShader.setUniform('myFloat', 0.1);

// sending a vec2
myShader.setUniform('myVec2', [-1, 13]);

// sending a vec3
myShader.setUniform('myVec3', [27, 80, 230]);

// sending a vec4
myShader.setUniform('myVec4', [mouseX, mouseY, mouseX/width, mouseY/height]);

Additionally, some of these examples use extra graphics layers for more complex effects. You may want to look into the createGraphics() function to learn how it works.

Basics

These shaders are about as stripped down as can be. They mostly just render colors to the screen. Start here if you've never seen or used a shader before.

1. Red
2. Gray
3. Cyan
4. Functions

Texture Coordinates

These shaders show how to manipulate texture coordinates in a variety of different way. They start out simple, and gradually become more complex.

1. Basic
2. Tiles
3. Gradient
4. Random
5. Noise
6. Checker

Uniforms

These shaders show how to send data to the shader in uniform variables. All examples after this section will use uniforms to talk to the shader.

1. Mouse
2. texture2D
3. time

Image Effects

This section is a collection of shaders that manipulate images or video in some way. Some of them are simple examples like inverting colors, and others are more complicated effects like bloom. Most of these examples use the webcam.

1. Invert
2. RGB Split
3. Sinewave Distortion
4. Video Mirror
5. Texcoord Stripes
6. Pixelate / Mosaic
7. Displacement Map
8. RGB to HSB conversion
9. Single Pass Blur
10. Multi-Pass Blur
11. Bloom
12. Threshold
13. Frame Differencing
14. RGB to Grayscale conversion
15. Convolution Kernel Effects (Blur, Sharpen, Emboss, Edge Detect)
16. Video Feedback
17. Texture Delay
18. Discard
19. Slitscan
20. Fly's Eye Mosaic

Shapes

These shaders show how to create basic shapes just using math within the shader.

1. Rectangle
2. Circle
3. Polygon

3d

These examples show how to use shaders with 3d geometry

1. Box
2. Vertex Displacement
3. Vertex Displacement With Texture
4. Matcap Shader