Static p5_sys::global::shader

pub static shader: ShaderInternalType

The shader() function lets the user provide a custom shader to fill in shapes in WEBGL mode. Users can create their own shaders by loading vertex and fragment shaders with loadShader().

Examples

// Click within the image to toggle
// the shader used by the quad shape
// Note: for an alternative approach to the same example,
// involving changing uniforms please refer to:
// https://p5js.org/reference/#/p5.Shader/setUniform

let redGreen;
let orangeBlue;
let showRedGreen = false;

function preload() {
  // note that we are using two instances
  // of the same vertex and fragment shaders
  redGreen = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
  orangeBlue = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
}

function setup() {
  createCanvas(100, 100, WEBGL);

  // initialize the colors for redGreen shader
  shader(redGreen);
  redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);
  redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);

  // initialize the colors for orangeBlue shader
  shader(orangeBlue);
  orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);
  orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);

  noStroke();
}

function draw() {
  // update the offset values for each shader,
  // moving orangeBlue in vertical and redGreen
  // in horizontal direction
  orangeBlue.setUniform('offset', [0, sin(millis() / 2000) + 1]);
  redGreen.setUniform('offset', [sin(millis() / 2000), 1]);

  if (showRedGreen === true) {
    shader(redGreen);
  } else {
    shader(orangeBlue);
  }
  quad(-1, -1, 1, -1, 1, 1, -1, 1);
}

function mouseClicked() {
  showRedGreen = !showRedGreen;
}

Parameters

s? the desired p5.Shader to use for rendering shapes.