modify()

Returns a new shader, based on the original, but with custom snippets of shader code replacing default behaviour.

Each shader may let you override bits of its behavior. Each bit is called a hook. For example, a hook can let you adjust positions of vertices, or the color of a pixel. You can inspect the different hooks available by calling yourShader.inspectHooks(). You can also read the reference for the default material, normal material, color, line, and point shaders to see what hooks they have available.

modify() can be passed a function as a parameter. Inside, you can override hooks by calling them as functions. Each hook will take in a callback that takes in inputs and is expected to return an output. For example, here is a function that changes the material color to red:

In addition to calling hooks, you can create uniforms, which are special variables used to pass data from p5.js into the shader. They can be created by calling uniform + the type of the data, such as uniformFloat for a number of uniformVector2 for a two-component vector. They take in a function that returns the data for the variable. You can then reference these variables in your hooks, and their values will update every time you apply the shader with the result of your function.

p5.strands functions are special, since they get turned into a shader instead of being run like the rest of your code. They only have access to p5.js functions, and variables you declare inside the modify callback. If you need access to local variables, you can pass them into modify with an optional second parameter, variables. If you are using instance mode, you will need to pass your sketch object in this way.

You can also write GLSL directly in modify if you need direct access. To do so, modify() takes one parameter, hooks, an object with the hooks you want to override. Each key of the hooks object is the name of a hook, and the value is a string with the GLSL code for your hook.

If you supply functions that aren't existing hooks, they will get added at the start of the shader as helper functions so that you can use them in your hooks.

To add new uniforms to your shader, you can pass in a uniforms object containing the type and name of the uniform as the key, and a default value or function returning a default value as its value. These will be automatically set when the shader is set with shader(yourShader).

You can also add a declarations key, where the value is a GLSL string declaring custom uniform variables, globals, and functions shared between hooks. To add declarations just in a vertex or fragment shader, add vertexDeclarations and fragmentDeclarations keys.