Passing Shader Uniforms
Uniforms are the way in which information is passed from p5 to the shader.
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
24
25
26
27
28
29
// this variable will hold our shader object
let theShader;
function preload(){
// load the shader
theShader = loadShader('assets/uniforms.vert', 'assets/uniforms.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);
// lets send the resolution, mouse, and time to our shader
// before sending mouse + time we modify the data so it's more easily usable by the shader
theShader.setUniform('resolution', [width, height]);
theShader.setUniform('mouse', map(mouseX, 0, width, 0, 7));
theShader.setUniform('time', frameCount * 0.01);
// rect gives us some geometry on the screen
rect(0,0,width, height);
}
