card_market_v2_effect - OpenProcessing

mySketch
frag
vert
xxxxxxxxxx
 
let s, shader_graphic;
let img, img_ratio, img1, img1_ratio, img2, img2_ratio, overBox;
let gui, preset_gui;
​
var config = {
  COLOR1: {r:182.9,g:180.5,b:255},
  COLOR2: {r:244.8,g:138.9,b:255},
  COLOR_BACKGROUND: {r:255,g:255,b:255}
};
​
(function(){
  let gui = new dat.GUI();
  gui.addColor(config, "COLOR1").name("color1");
  gui.addColor(config, "COLOR2").name("color2");
  gui.addColor(config, "COLOR_BACKGROUND").name("color_background");
})();
​
function preload() {
  img = loadImage('full_card_alpha.png');
  img1 = loadImage('card_alpha.png');
  img2 = loadImage('BG_card.jpg');
}
​
function setup() {
  pixelDensity(1);
  createCanvas(windowWidth, windowHeight, WEBGL);
  noStroke();
​
  img_ratio = img.width / img.height;
  img1_ratio = img1.width / img1.height;
  img2_ratio = img2.width / img2.height;
  overBox = 1;
  
  s = createShader(vert, frag);
  shader(s);
}
​
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  redraw();
}
​
function normalize_color(c) {
  return [c.r / 255, c.g / 255, c.b / 255];
}
​
function draw() {
  if (mouseX > (width / 2 - 500) - 170 && mouseX < (width / 2 - 500) + 320 &&
      mouseY > (height / 2) - 310 && mouseY < (height / 2) + 310) {
    overBox -= 0.05;
  } else {
    overBox += 0.05;
  }
  
  if (overBox > 1) {
    overBox = 1;
  } else if (overBox < -0.1) {
    overBox = -0.1;
  }
  
  s.setUniform("iResolution", [width, height]);
  s.setUniform("iMouse", [mouseX, mouseY]);
  s.setUniform("iTime", millis() * 0.001);
  
  s.setUniform("iBox", overBox);
  
  s.setUniform("iChannel0", img);
  s.setUniform("iChannel0Ratio", img_ratio);
  s.setUniform("iChannel1", img1);
  s.setUniform("iChannel1Ratio", img1_ratio);
  s.setUniform("iChannel2", img2);
  s.setUniform("iChannel2Ratio", img2_ratio);
  
  s.setUniform("u_color_background", normalize_color(config.COLOR_BACKGROUND));
  s.setUniform("u_color1", normalize_color(config.COLOR1));
  s.setUniform("u_color2", normalize_color(config.COLOR2));
  
  rect(0, 0, width, height);
}