Как плавно переходить между несколькими шейдерами с помощью p5. js? - PullRequest
Новая
       98

Как плавно переходить между несколькими шейдерами с помощью p5. js?

0 голосов
/ 09 июля 2020

Я пытаюсь понять, как переходить между массивом шейдеров со случайной скоростью и случайной непрозрачностью. Я попытался создать оператор if, который обеспечил бы новую целевую непрозрачность и целевую скорость времени, которая потребуется для полного изменения целевой непрозрачности. Я попытался нарисовать шейдер в операторе IF, но он не исчезал плавно. Любая помощь будет оценена. Вот что у меня есть в файле. js. И у меня есть полный проект по этой ссылке https://glitch.com/edit/#! / Mulripleshadertest? Path = sketch.js% 3A74% 3A2 

let backgroundShader1;
let foregroundShader1;
let shaderBackground1Ndx = Math.floor(Math.random() * 15); //choose random shader
let shaderForeground1Ndx = Math.floor(Math.random() * 15);

let w, h;
let shaderTexture;
let changeEvery1 =100; //set rate
let changeEvery2 =100;
let alpha1 = Math.random() //random opacity level
let alpha2 = Math.random()


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"));
  shaders.push(loadShader("shader3.vert", "shader4.frag"));
  shaders.push(loadShader("shader3.vert", "shader5.frag"));
  shaders.push(loadShader("shader3.vert", "shader6.frag"));
  shaders.push(loadShader("shader3.vert", "shader7.frag"));
  shaders.push(loadShader("shader3.vert", "shader8.frag"));
  shaders.push(loadShader("shader3.vert", "shader9.frag"));
  shaders.push(loadShader("shader3.vert", "shader10.frag"));
  shaders.push(loadShader("shader3.vert", "shader11.frag"));
  shaders.push(loadShader("shader3.vert", "shader12.frag"));
  shaders.push(loadShader("shader3.vert", "shader13.frag"));
  shaders.push(loadShader("shader3.vert", "shader14.frag"));
  theShader = shaders[0]; // start with the first shader
}

function setup() {
  frameRate(20);
  w = windowWidth;
  h = windowHeight;
  //creates canvas
  createCanvas(w, h, WEBGL);
  noStroke();

  // initialize the createGraphics layers
  shaderTexture = createGraphics(w, h, WEBGL);
  shaderTexture.noStroke();
  
  backgroundShader1 = shaders[shaderBackground1Ndx];
  foregroundShader1 = shaders[shaderForeground1Ndx];

}

function draw() {
  background(255);
  //
  //layer1
  //
  let time1 = frameCount % changeEvery1;
  if (time1 == 0) {
    backgroundShader1 = foregroundShader1;
    shaderForeground1Ndx = (shaderForeground1Ndx + Math.floor(Math.random() * 14)) % shaders.length;
    foregroundShader1 = shaders[shaderForeground1Ndx];
    
    //backgroundShader1.setUniform("backgroundAlpha",map(time1, 0, changeEvery1,alpha2,0));
    //foregroundShader1.setUniform("backgroundAlpha", map(time1, 0, changeEvery1, 0, alpha1));
    
    alpha2=alpha1 
    alpha1 = Math.random()*.5+.5; //random opacity b/w 0-1
    changeEvery2=changeEvery1; 
    changeEvery1=Math.floor(Math.random() * 150) + 50; //choose rate between certain amount of sec
  
  }

  // Background shader
  shaderTexture.shader(backgroundShader1);
  shaderTexture.rect(0, 0, 2 * w, h);
  backgroundShader1.setUniform("iResolution", [w, h]);
  backgroundShader1.setUniform("iFrame", frameCount);
  backgroundShader1.setUniform("iMouse", [mouseX, map(mouseY, 0, h, h, 0)]);
  backgroundShader1.setUniform("iTime", millis() / 1000.0);
  backgroundShader1.setUniform("u_resolution", [w, h]);
  backgroundShader1.setUniform("u_time", millis() / 1000.0);
  backgroundShader1.setUniform("u_mouse", [mouseX, map(mouseY, 0, h, h, 0)]);
  backgroundShader1.setUniform("backgroundAlpha",map(time1, 0, changeEvery2,alpha2,0)); //maps the shader fading out
  //backgroundShader1.setUniform("backgroundAlpha",map(time1, 0, Math.floor(Math.random() * 700) + 100,Math.random(),0));
  texture(shaderTexture);
  rect(-windowWidth / 2, -windowHeight /2, windowWidth, windowHeight);

  // Foreground shader
  shaderTexture.shader(foregroundShader1);
  shaderTexture.rect(0, 0, 2 * w, h);
  foregroundShader1.setUniform("iResolution", [w, h]);
  foregroundShader1.setUniform("iFrame", frameCount);
  foregroundShader1.setUniform("iMouse", [mouseX, map(mouseY, 0, h, h, 0)]);
  foregroundShader1.setUniform("iTime", millis() / 1000.0);
  foregroundShader1.setUniform("u_resolution", [w, h]);
  foregroundShader1.setUniform("u_time", millis() / 1000.0);
  foregroundShader1.setUniform("u_mouse", [mouseX, map(mouseY, 0, h, h, 0)]);
  //console.log("alpha: ", map(frameCount % changeEvery, 0, changeEvery-1, 0.0, 1.0)) ;
  foregroundShader1.setUniform("backgroundAlpha", map(time1, 0, changeEvery1, 0, alpha1)); //maps shader fading in
  //foregroundShader1.setUniform("backgroundAlpha", map(time1, 0, Math.floor(Math.random() * 700) + 100,0,Math.random()));

  texture(shaderTexture);
  rect(-windowWidth / 2,-windowHeight / 2,windowWidth,windowHeight);
  
 
  
}
  
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
...