Intro to Shaders

The concept

A shader is a GPU program that runs for each pixel (fragment shader) or vertex (vertex shader). In p5.js WEBGL, create a shader with createShader(vert, frag). The fragment shader receives UV coordinates and computes each pixel's color in parallel — making shaders extremely fast.

The code

// Simple gradient shader (WEBGL)
let sh;
const vert = `attribute vec3 aPosition; void main(){gl_Position=vec4(aPosition,1.0);}`;
const frag = `precision mediump float; uniform vec2 u_resolution; uniform float u_time;
void main(){vec2 uv=gl_FragCoord.xy/u_resolution; float c=0.5+0.5*sin(uv.x*6.28+u_time);
gl_FragColor=vec4(uv.x*0.2,c*0.9,c*0.77,1.0);}`;
function setup(){createCanvas(400,280,WEBGL);sh=createShader(vert,frag);}
function draw(){shader(sh);sh.setUniform('u_resolution',[width,height]);sh.setUniform('u_time',millis()/1000);rect(0,0,width,height);}

Going further

Explore other free courses on the Learn page, or book a call to discuss your project.