[−][src]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.