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.
Javascript
let circleShader;
function preload() {
circleShader = loadShader( 'basic.vert' , 'basic.frag' );
}
function setup() {
createCanvas(400, 400, WEBGL);
noStroke();
}
function draw() {
shader(circleShader);
circleShader.setUniform(
'resolution' , [width, height]
);
circleShader.setUniform(
'time' , frameCount * 0.05
);
rect(0, 0, width, height);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
|
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
Last Updated :
24 Mar, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...