Skip to content
Related Articles
Open in App
Not now

Related Articles

p5.js loadShader() Method

Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 08 Apr, 2021
Improve Article
Save Article

The function loadShader() loads the shader from files and returns them as a p5 shader object in a variable. The file extension can be .glsl or .shader or .vertex.

It loadShader() should be called from within preload().


loadShader(vertFilename, fragFilename, [callback], [errorCallback])


  • vertFilename : It is of string type, and it contains path to the file containing vertex shader source code.
  • fragFilename : It is of string type, and it contains path to the file containing fragment shader source code.
  • callback : It is a function which is executed after loadShader completes. On success, the Shader object is passed as the first argument. It is optional.
  • errorCallback : It is a function which is executed when an error occurs inside loadShader. When there is error then the error is passed as the first argument. It is optional.

Returns :

A shader object that is created from the provided vertex and fragment shader files.

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


// this variable will hold our shader object
let rectShader;
function preload(){
  rectShader = loadShader('base.vert', 'rect.frag');
function setup() {
  // shaders require WEBGL mode to work
  createCanvas(400, 400, WEBGL);
function draw() {  
  // shader() sets the active shader with our shader
  // lets send the time and resolution to our shader
  rectShader.setUniform('resolution', [width, height]);
  rectShader.setUniform('time', frameCount * 0.1);
  // rect gives us some geometry on the screen
  rect(0,0,width, height);
function windowResized(){
  resizeCanvas(windowWidth, windowHeight);


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 if we don't do this, 
 // it will appear with its bottom left corner 
 // in the center of the sketch try commenting 
 // this line out to see what happens
 positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
 // Send the vertex information on to the fragment shader
 gl_Position = positionVec4;


<pre>precision mediump float;
varying vec2 vTexCoord;
// We need the sketch resolution to perform
// some calculations
uniform vec2 resolution;
uniform float time;
// This is a 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);
// this is the function that draws our rect
// it works just like rect in p5 except that
// it takes an additional color parameter at the end
vec3 rect (float x, float y, float w, float h, vec3 color){
  // in this example we will use gl_FragCoord which is a 
  // variable that just gives us pixel position as whole 
  // numbers, just like in p5
  vec2 coord = gl_FragCoord.xy;
  // we reverse the coords because in webGL 0,0 
  // is at the bottom left
  coord.y = resolution.y - coord.y;
  // one way we could make a rect is by using 
  // an if statement, however if statements are 
  // considered to be slow inside of shaders
  // instead we will use some math functions to calculate a rectangle
  // mix takes three values i.e. mix(option1, option2, edge)
  // option one will be chosen if edge equals zero
  // option two will be chose if edge equals one
  // the step function takes two arguments i.e. step(edge, val)
  // step returns 0.0 if val is less than edge
  // step returns 1.0 if val is greater than edge
  // using these two functions combined we can section 
  // off parts of the screen into black and white
  float width = 1.0 -mix(0.0, 1.0, step(x + w, coord.x));
  float xPos =  1.0 -mix(0.0, 1.0, step(x, coord.x));
  float height = 1.0 - mix(0.0, 1.0, step(y + h, coord.y));
  float yPos = 1.0 - mix(0.0, 1.0, step(y, coord.y));
  // create a color to use
  vec3 col = rgb(color.r, color.g, color.b);
  // calculate the final rectangle
  // we will multiply the x values against the y values
  //  to produce our final rect as black and white
  // the black and white mask is multiplied against our
  // color and returned.
  return  col * ((height - yPos) * (width - xPos));
void main() {
  // The width and height of our rectangle
  float width = 200.0;
  float height = 200.0;
  // The center of the screen is just the 
  // resolution divided in half
  vec2 center = resolution * 0.1;
  // 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 - width*0.6;
  float y = center.y - height*0.6;
  // a color for the rect 
  vec3 pink = vec3(255.0,99.0, 71.0);
  // a color for the bg
  vec3 blue = rgb(0.0, 0.0, 255.0);
  // lets add a sine wave to the x position so that 
  // it moves back and forth
  x += sin(time) *100.0;
  // call our rect function with the values we defined
  vec3 r = rect(x, y, width, height, pink);
  // now mix the rect with the background color
  // anything that is black in r will become the bg
  vec3 scene = mix(blue, r, r);
  // out put the final image
  gl_FragColor = vec4( scene ,4.0);



My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!