Basic Shader
This is a basic example showing how to load shaders in p5.js.
To learn more about using shaders in p5.js: p5.js Shaders
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// this variable will hold our shader object
let theShader;
function preload(){
// load the shader
theShader = loadShader('assets/basic.vert', 'assets/basic.frag');
}
function setup() {
// shaders require WEBGL mode to work
createCanvas(710, 400, WEBGL);
noStroke();
}
function draw() {
// shader() sets the active shader with our shader
shader(theShader);
// rect gives us some geometry on the screen
rect(0,0,width, height);
}
