Reference loadFilterShader()

loadFilterShader()

This API is experimental

Its behavior may change in a future version of p5.js.

Loads a new shader from a file that can be applied to the contents of the canvas with filter(). Pass the resulting shader into filter() to apply it.

Since this function loads data from another file, it returns a Promise. Use it in an async function setup, and await its result.

async function setup() {
  createCanvas(50, 50, WEBGL);
  let img = await loadImage('/assets/bricks.jpg');
  let myFilter = await loadFilterShader('myFilter.js');

  image(img, -50, -50);
  filter(myFilter);
  describe('Bricks tinted red');
}

Inside your shader file, you can use p5.strands hooks to change parts of the shader. For a filter shader, use filterColor to change each pixel on the canvas.

// myFilter.js
filterColor.begin();
let result = getTexture(
  filterColor.canvasContent,
  filterColor.texCoord
);
// Zero out the green and blue channels, leaving red
result.g = 0;
result.b = 0;
filterColor.set(result);
filterColor.end();

Read the reference for buildFilterShader, the version of loadFilterShader that takes in a function instead of a separate file, for more examples.

The second parameter, successCallback, is optional. If a function is passed, as in loadFilterShader('myShader.js', onLoaded), then the onLoaded() function will be called once the shader loads. The shader will be passed to onLoaded() as its only argument. The return value of handleData(), if present, will be used as the final return value of loadFilterShader('myShader.js', onLoaded).

Examples

Syntax

loadFilterShader(filename, [successCallback], [failureCallback])

Parameters

filename
String: path to a p5.strands JavaScript file or a GLSL fragment shader file
successCallback
Function: callback to be called once the shader is loaded. Will be passed the p5.Shader object.
failureCallback
Function: callback to be called if there is an error loading the shader. Will be passed the error event.

Returns

Promise<p5.Shader>: a promise that resolves with a shader object
Notice any errors or typos? Please let us know. Please feel free to edit src/webgl/material.js and open a pull request!

Related References