Texture was flipped horizontally. This fixes it.
|4 months ago|
|1_basics||9 months ago|
|2_texture-coordinates||9 months ago|
|3_uniforms||9 months ago|
|4_image-effects||4 months ago|
|5_shapes||9 months ago|
|6_3d||9 months ago|
|.gitignore||2 years ago|
|README.md||2 years ago|
|index.html||4 years ago|
|p5.dom.js||4 years ago|
|p5.dom.min.js||4 years ago|
|p5.js||4 years ago|
|p5.min.js||2 years ago|
|package-lock.json||2 years ago|
|sketch-styles.css||9 months ago|
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.
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().
shader(myShader) sets the currently active shader. You can also call this function on createGraphics() layers if you have them in your scene.
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.
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.
These shaders show how to manipulate texture coordinates in a variety of different way. They start out simple, and gradually become more complex.
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.
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.
- RGB Split
- Sinewave Distortion
- Video Mirror
- Texcoord Stripes
- Pixelate / Mosaic
- Displacement Map
- RGB to HSB conversion
- Single Pass Blur
- Multi-Pass Blur
- Frame Differencing
- RGB to Grayscale conversion
- Convolution Kernel Effects (Blur, Sharpen, Emboss, Edge Detect)
- Video Feedback
- Texture Delay
- Fly's Eye Mosaic
These shaders show how to create basic shapes just using math within the shader.
These examples show how to use shaders with 3d geometry