buildMaterialShader()

Create a new shader that can change how fills are drawn. Pass the resulting shader into the shader() function to apply it to any fills you draw.

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

In your function, you can call hooks to change part of the shader. In a material shader, these are the hooks available:

• objectInputs: Update vertices before any positioning has been applied. Your function gets run on every vertex.
• worldInputs: Update vertices after transformations have been applied. Your function gets run on every vertex.
• cameraInputs: Update vertices after transformations have been applied, relative to the camera. Your function gets run on every vertex.
• pixelInputs: Update property values on pixels on the surface of a shape. Your function gets run on every pixel.
• combineColors: Control how the ambient, diffuse, and specular components of lighting are combined into a single color on the surface of a shape. Your function gets run on every pixel.
• finalColor: Update or replace the pixel color on the surface of a shape. Your function gets run on every pixel.

Read the linked reference page for each hook for more information about how to use them.

One thing you can do with a material shader is animate the positions of vertices over time:

There are also many uses in updating values per pixel. This can be a good way to give your sketch texture and detail. For example, instead of having a single shininess or metalness value for a whole shape, you could vary it in different spots on its surface:

A technique seen often in games called bump mapping is to vary the normal, which is the orientation of the surface, per pixel to create texture rather than using many tightly packed vertices. Sometimes this can come from bump images, but it can also be done generatively with math.

You can also update the final color directly instead of modifying lighting settings. Sometimes in photographs, a light source is placed behind the subject to create rim lighting, where the edges of the subject are lit up. This can be simulated by adding white to the final color on parts of the shape that are facing away from the camera.

Like the modify() method on shaders, advanced users can also fill in hooks using GLSL instead of JavaScript. Read the reference entry for modify() for more info.