I am trying to fade between several different types of shaders from shadertoy by importing them to p5.js and am trying to figure out the best way to do that? I am trying to figure out if I can somehow just use the tint()
function to adjust the opacity of the shader after I load them in and loop through them, but don’t exactly know if that’s possible. Here’s what I have so far, which just switches between a shader once a second. Any help would be greatly appreciated.
full project with shaders is here
let theShader;
let oldTime;
let shaderNdx = 0;
const shaders = [];
function preload(){
// load the shaders
shaders.push(loadShader('shader1.vert', 'shader1.frag'));
shaders.push(loadShader('shader2.vert', 'shader2.frag'));
shaders.push(loadShader('shader3.vert', 'shader3.frag'));
theShader = shaders[0]; // start with the first shader
}
function setup() {
//creates canvas
createCanvas(windowWidth, windowHeight, WEBGL);
noStroke();
}
function draw() {
// switch shaders every second
let time = performance.now() / 1000 | 0; // convert to seconds
if (oldTime !== time) {
oldTime = time;
// increment shader index to the next shader but wrap around
// back to 0 at then of the array of shaders
shaderNdx = (shaderNdx + 2) % shaders.length;
theShader = shaders[shaderNdx]
}
//sets the active shader
shader(theShader);
theShader.setUniform("iResolution", [width, height]);
theShader.setUniform("iFrame", frameCount);
theShader.setUniform("iMouse", [mouseX, map(mouseY, 0, height, height, 0)]);
theShader.setUniform("iTime", millis() / 1000.0);
theShader.setUniform("u_resolution", [width, height]);
theShader.setUniform("u_time", millis() / 1000.0);
theShader.setUniform("u_mouse", [mouseX, map(mouseY, 0, height, height, 0)]);
// rect gives us some geometry on the screen
rect(0,0,width, height);
}
function windowResized(){
resizeCanvas(windowWidth, windowHeight);
}