buildFilterShader()

Creates a p5.Shader object to be used with the filter() function.

The main way to use buildFilterShader is to pass a function in as a parameter. This will let you create a shader using p5.strands.

In your function, you can use filterColor with a function that will be called for each pixel on the image to determine its final color. You can read the color of the current pixel with getTexture(canvasContent, coord). See getTexture().

You can create uniforms if you want to pass data into your filter from the rest of your sketch. For example, you could pass in the mouse cursor position and use that to control how much you warp the content. If you create a uniform inside the shader using a function like uniformFloat(), with uniform + the type of the data, you can set its value using setUniform right before applying the filter. In the example below, move your mouse across the image to see it update the warpAmount uniform:

You can also make filters that do not need any content to be drawn first! There is a lot you can draw just using, for example, the position of the pixel. inputs.texCoord has an x and a y property, each with a number between 0 and 1.

You can also animate your filters over time by passing the time into the shader with uniformFloat.

Like the modify() method on shaders, advanced users can also fill in filterColor using GLSL instead of JavaScript. Read the reference entry for modify() for more info. Alternatively, buildFilterShader() can also be used like createShader(), but where you only specify a fragment shader.

For more info about filters and shaders, see Adam Ferriss' repo of shader examples or the Introduction to Shaders tutorial.