Reference baseStrokeShader()

baseStrokeShader()

This API is experimental

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

Get the shader used when drawing the strokes of shapes.

You can call baseStrokeShader().modify() and change any of the following hooks:

HookDescription

void beforeVertex

Called at the start of the vertex shader.

vec3 getLocalPosition

Update the position of vertices before transforms are applied. It takes in vec3 position and must return a modified version.

vec3 getWorldPosition

Update the position of vertices after transforms are applied. It takes in vec3 position and pust return a modified version.

float getStrokeWeight

Update the stroke weight. It takes in float weight and pust return a modified version.

vec2 getLineCenter

Update the center of the line. It takes in vec2 center and must return a modified version.

vec2 getLinePosition

Update the position of each vertex on the edge of the line. It takes in vec2 position and must return a modified version.

vec4 getVertexColor

Update the color of each vertex. It takes in a vec4 color and must return a modified version.

void afterVertex

Called at the end of the vertex shader.

void beforeFragment

Called at the start of the fragment shader.

Inputs getPixelInputs

Update the inputs to the shader. It takes in a struct Inputs inputs, which includes:

  • vec4 color, the color of the stroke
  • vec2 tangent, the direction of the stroke in screen space
  • vec2 center, the coordinate of the center of the stroke in screen space p5.js pixels
  • vec2 position, the coordinate of the current pixel in screen space p5.js pixels
  • float strokeWeight, the thickness of the stroke in p5.js pixels

bool shouldDiscard

Caps and joins are made by discarded pixels in the fragment shader to carve away unwanted areas. Use this to change this logic. It takes in a bool willDiscard and must return a modified version.

vec4 getFinalColor

Update the final color after mixing. It takes in a vec4 color and must return a modified version.

void afterFragment

Called at the end of the fragment shader.

Most of the time, you will need to write your hooks in GLSL ES version 300. If you are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.

Call baseStrokeShader().inspectHooks() to see all the possible hooks and their default implementations.

Examples

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!

Related References