p5.js shader() Method

The shader() function in p5.js makes it possible to use a custom shader to fill in shapes in the WEBGL mode. A custom shader could be loaded using the loadShader() method, and it could even be programmed to have moving graphics on them.

Syntax:

shader( [s] )

Parameter: This function has a single parameter as mentioned above and discussed below:

• s: It is a p5.Shader object that contains the desired shader to be used for filling shapes.

The below example demonstrates the shader() function in p5.js:

Example: This example shows how to draw a circle with a shader.

basic.vert

attribute vec3 aPosition;
attribute vec2 aTexCoord;

void main() {

 // Copy the position data into a vec4,
 // using 1.0 as the w component
 vec4 positionVec4 = vec4(aPosition, 1.0);

 // Scale the rect by two, and move it to
 // the center of the screen
 positionVec4.xy = positionVec4.xy * 2.0 - 1.0;

 // Send the vertex information on to
 // the fragment shader
 gl_Position = positionVec4;
}

basic.frag

precision mediump float;

varying vec2 vTexCoord;

// We need the sketch resolution to
// perform some calculations
uniform vec2 resolution;
uniform float time;

// Function that turns an rgb value that
// goes from 0 - 255 into 0.0 - 1.0
vec3 rgb(float r, float g, float b){
  return vec3(r / 255.0, g / 255.0, b / 255.0);
}

vec4 circle(float x, float y, float diam, vec3 col){
    vec2 coord = gl_FragCoord.xy;
    // Flip the y coordinates for p5
    coord.y = resolution.y - coord.y;

    // Store the x and y in a vec2 
    vec2 p = vec2(x, y);

    // Calculate the circle
    // First get the difference of the circles 
    // location and the screen coordinates
    // compute the length of that result and 
    // subtract the radius
    // this creates a black and white mask that 
    // we can use to multiply against our colors
    float c = length( p - coord) - diam*0.5;

    // Restrict the results to be between 
    // 0.0 and 1.0
    c = clamp(c, 0.0,1.0);
  
    // Send out the color, with the circle
    // as the alpha channel  
    return vec4(rgb(col.r, col.g, col.b), 1.0 - c);  
}


void main() {

  // The width and height of our rectangle
  float width = 100.0;
  float height = 200.0;

  // the center of the screen is just the
  // resolution divided in half
  vec2 center = resolution * 0.5;

  // Lets make our rect in the center of the
  // screen. We have to subtract half of it's
  // width and height just like in p5
  float x = center.x ;
  float y = center.y ;

  // add an oscillation to x

  x += sin(time) * 200.0;

  // A color for the rect 
  vec3 grn = vec3(200.0, 240.0, 200.0);

  // A color for the bg
  vec3 magenta = rgb(240.0,150.0,240.0);

  // Call our circle function
  vec4 circ = circle(x, y, 200.0, grn);
  // out put the final image

  // Mix the circle with the background color
  // using the circles alpha
  circ.rgb = mix(magenta, circ.rgb, circ.a);

  gl_FragColor = vec4( circ.rgb ,1.0);
}

Output:

Reference: https://p5js.org/reference/#/p5/shader