# Fading between shadertoy shaders in p5.js?

**URL:** <https://discourse.processing.org/t/fading-between-shadertoy-shaders-in-p5-js/21933>\
**Category:** Coding Questions\
**Created:** [June 16, 2020, 10:42pm UTC](https://discourse.processing.org/t/fading-between-shadertoy-shaders-in-p5-js/21933 "2020-06-16T22:42:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Spenc](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@Spenc](https://discourse.processing.org/u/Spenc)\
**Post date:** [June 16, 2020, 10:42pm UTC](https://discourse.processing.org/t/fading-between-shadertoy-shaders-in-p5-js/21933/1 "2020-06-16T22:42:06Z")

</div>

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

> **[Outgoing Island Enthusiasm](https://glitch.com/~outgoing-island-enthusiasm)**
>
> Check out ~outgoing-island-enthusiasm on Glitch, the friendly community where everyone can discover & create the best apps on the web.

```auto
    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);
    }

```

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [June 17, 2020, 7:56pm UTC](https://discourse.processing.org/t/fading-between-shadertoy-shaders-in-p5-js/21933/2 "2020-06-17T19:56:30Z")

</div>

Hi @Spenc,

Next time when crossposting your question on other sites, please mention that. That way, we can avoid solving something that already has an answer. It looks like there’s a potential solution in your thread over at StackOverflow. 🙂

> <https://stackoverflow.com/questions/62418710/fading-between-shadertoy-shaders-in-p5-js>

---

<div class="post-metadata">

**Author:** ![Spenc](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@Spenc](https://discourse.processing.org/u/Spenc)\
**Post date:** [June 18, 2020, 5:16pm UTC](https://discourse.processing.org/t/fading-between-shadertoy-shaders-in-p5-js/21933/3 "2020-06-18T17:16:50Z")

</div>

Sorry I am new to these forums and using these programming languages. I will definitely do that next time. I appreciate it!