Referencia buildStrokeShader()

buildStrokeShader()

This API is experimental

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

Create a new shader that can change how strokes are drawn, based on the default shader used for strokes. Pass the resulting shader into the strokeShader() function to apply it to any strokes you draw.

The main way to use buildStrokeShader 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.
  • 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 might want to do is update the color of a stroke per pixel. Here, it is being used to create a soft texture:

Rather than using opacity, we could use a form of dithering to get a different texture. This involves using only fully opaque or transparent pixels. Here, we randomly choose which pixels to be transparent:

You might also want to update some properties per vertex, such as the stroke thickness. This lets you create a more varied line:

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.

Ejemplos

Sintaxis

buildStrokeShader(callback)
buildStrokeShader(hooks)

Parámetros

callback
Function: A function building a p5.strands shader.
hooks
Object: An object specifying p5.strands hooks in GLSL.

Returns

p5.Shader: The stroke shader.
Notice any errors or typos? Please let us know. Please feel free to edit src/webgl/material.js and open a pull request!

Referencias Relacionadas