slider.js

// ─── Vertex shader (shared) ───────────────────────────────────────────────────
const VERT = `
attribute vec2 a_pos;
varying   vec2 vUv;
void main() {
  vUv = a_pos * .5 + .5;
  gl_Position = vec4(a_pos, 0., 1.);
}`;

// ─── Fragment shader header ───────────────────────────────────────────────────
const HEAD = `
precision highp float;
uniform sampler2D tA, tB;
uniform float     progress;
uniform vec2      res;
varying vec2      vUv;

vec2 cover(vec2 uv, vec2 imgSize) {
  vec2 s = res, i = imgSize;
  float rs = s.x/s.y, ri = i.x/i.y;
  vec2 new = rs<ri ? vec2(i.x*s.y/i.y, s.y) : vec2(s.x, i.y*s.x/i.x);
  vec2 offset = (new-s)*.5;
  return (uv*s + offset) / new;
}
#define A(uv) texture2D(tA, uv)
#define B(uv) texture2D(tB, uv)
`;

// ─── All shaders ─────────────────────────────────────────────────────────────
const SHADERS = {

  wind: `
    float rand(vec2 co) { return fract(sin(dot(co,vec2(12.9898,78.233)))*43758.5453); }
    void main() {
      float r = rand(vec2(0., vUv.y));
      float m = smoothstep(0., -.2, vUv.x*(1.-.2) + .2*r - progress*(1.2));
      gl_FragColor = mix(A(vUv), B(vUv), m);
    }`,

  wave: `
    vec2 mir(vec2 v){ vec2 m=mod(v,2.); return mix(m,2.-m,step(1.,m)); }
    void main() {
      float prog = (1.-progress)*.8 - .05;
      float t = sin(vUv.x*12. - progress*8.) * .03 * (1.-progress);
      vec2 uv = vUv + vec2(0., t);
      float intpl = pow(abs(smoothstep(0.,1., prog*2.-uv.x+.5)), 8.);
      gl_FragColor = mix(B((uv-.5)*(1.-intpl)+.5), A((uv-.5)*intpl+.5), intpl);
    }`,

  ripple: `
    float para(float x){ return 4.*x*(1.-x); }
    void main() {
      vec2  st  = vec2(.5);
      float prog = progress*.66;
      float w   = .35, r = .9;
      float circ = 1.-smoothstep(-w, 0., r*distance(st, vUv) - prog*(1.+w));
      float i   = pow(circ, 1.);
      vec4 t1 = A((vUv-.5)*(1.-i)+.5);
      vec4 t2 = B((vUv-.5)*i+.5);
      gl_FragColor = mix(t1, t2, i);
    }`,

  pixelize: `
    void main() {
      float d = min(progress, 1.-progress);
      float dist = ceil(d*20.)/20.;
      vec2  sq = 2.*dist/vec2(60.);
      vec2  p  = dist>0. ? (floor(vUv/sq)+.5)*sq : vUv;
      gl_FragColor = mix(A(p), B(p), progress);
    }`,

  dots: `
    void main() {
      float dots = 20.;
      vec2  c = vec2(.5);
      bool next = distance(fract(vUv*dots), vec2(.5)) < (progress / distance(vUv, c));
      gl_FragColor = next ? B(vUv) : A(vUv);
    }`,

  flyeye: `
    void main() {
      float inv = 1.-progress;
      vec2 disp = .04*vec2(cos(100.*vUv.x), sin(100.*vUv.y));
      vec4 from = vec4(
        A(vUv+progress*disp*.7).r,
        A(vUv+progress*disp    ).g,
        A(vUv+progress*disp*1.3).b, 1.);
      gl_FragColor = B(vUv+inv*disp)*progress + from*inv;
    }`,

  slices: `
    void main() {
      float count = 20., sm = .5;
      float pr = smoothstep(-sm, 0., vUv.x - progress*(1.+sm));
      float s  = step(pr, fract(count*vUv.x));
      gl_FragColor = mix(A(vUv), B(vUv), s);
    }`,

  squares: `
    void main() {
      vec2  v  = normalize(vec2(1.,-.5));
      v /= abs(v.x)+abs(v.y);
      float d  = dot(v, vec2(.5));
      float sm = 1.6;
      float pr = smoothstep(-sm, 0., dot(v, vUv)-(d-.5+progress*(1.+sm)));
      vec2  sp = fract(vUv*10.);
      vec2  mn = vec2(pr/2.), mx = vec2(1.-pr/2.);
      float a  = (1.-step(progress,0.))*step(mn.x,sp.x)*step(mn.y,sp.y)*step(sp.x,mx.x)*step(sp.y,mx.y);
      gl_FragColor = mix(A(vUv), B(vUv), a);
    }`,

  shutters: `
    mat2 rot(float a){ float s=sin(a),c=cos(a); return mat2(c,-s,s,c); }
    void main() {
      const float PI=3.1415, a=PI*.25;
      vec2 d = fract(vUv*vec2(50.,1.));
      vec2 uv1 = vUv + rot(a) *d*progress*.1;
      vec2 uv2 = vUv + rot(a) *d*(1.-progress)*.1;
      gl_FragColor = mix(A(uv1), B(uv2), progress);
    }`,

  stretch: `
    float hash(vec2 p){ return fract(1e4*sin(17.*p.x+p.y*.1)*(0.1+abs(sin(p.y*13.+p.x)))); }
    float noise(vec2 x){ vec2 i=floor(x),f=fract(x);
      float a=hash(i),b=hash(i+vec2(1,0)),c=hash(i+vec2(0,1)),d=hash(i+vec2(1,1));
      vec2 u=f*f*(3.-2.*f);
      return mix(a,b,u.x)+(c-a)*u.y*(1.-u.x)+(d-b)*u.x*u.y; }
    void main() {
      float n = noise(vUv*res/100.);
      vec2 dir = vec2(0., normalize(vec2(.5)- vUv).y);
      vec2 u1 = vUv + dir*progress/5.*(1.+n/2.);
      vec2 u2 = vUv - dir*(1.-progress)/5.*(1.+n/2.);
      gl_FragColor = mix(A(u1), B(u2), progress);
    }`,

  'morph-x': `
    mat2 rotM(float a){ float s=sin(a),c=cos(a); return mat2(c,-s,s,c); }
    void main() {
      const float PI=3.1415, a1=PI*.25, a2=-PI*.75;
      vec4 disp = texture2D(tA, vUv);  // use texture A as its own displacement
      vec2 dv = vec2(disp.r, disp.g);
      vec2 u1 = vUv + rotM(a1)*dv*1.*progress;
      vec2 u2 = vUv + rotM(a2)*dv*1.*(1.-progress);
      gl_FragColor = mix(A(u1), B(u2), progress);
    }`,

  'morph-y': `
    void main() {
      vec4 d1 = A(vUv), d2 = B(vUv);
      float dp1 = (d1.r+d1.g+d1.b)*.33;
      float dp2 = (d2.r+d2.g+d2.b)*.33;
      vec4 t1 = A(vec2(vUv.x, vUv.y + progress   *dp2*.3));
      vec4 t2 = B(vec2(vUv.x, vUv.y + (1.-progress)*dp1*.3));
      gl_FragColor = mix(t1, t2, progress);
    }`,

  'peel-x': `
    void main() {
      float x = smoothstep(0.,1., progress*2.+vUv.x-1.);
      gl_FragColor = mix(A((vUv-.5)*(1.-x)+.5), B((vUv-.5)*x+.5), x);
    }`,

  'peel-y': `
    void main() {
      float x = smoothstep(0.,1., progress*2.+vUv.y-1.);
      gl_FragColor = mix(A((vUv-.5)*(1.-x)+.5), B((vUv-.5)*x+.5), x);
    }`,

};

// page-curl needs a helper that got simplified — swap for a clean version
SHADERS['page-curl'] = `
  const float PI=3.14159265, MIN=-0.16, MAX=1.5, CR=1./PI/2., SC=512., SH=3.;
  vec4 antialias(vec4 c1,vec4 c2,float d){
    d*=SC; if(d<0.)return c2; if(d>2.)return c1;
    return mix(c1,c2,pow(1.-d/2.,SH));
  }
  float dte(vec3 p){
    float dx=p.x<0.?-p.x:p.x>1.?p.x-1.:abs(p.x>.5?1.-p.x:p.x);
    float dy=p.y<0.?-p.y:p.y>1.?p.y-1.:abs(p.y>.5?1.-p.y:p.y);
    if((p.x<0.||p.x>1.)&&(p.y<0.||p.y>1.))return sqrt(dx*dx+dy*dy);
    return min(dx,dy);
  }
  void main(){
    float amt = progress*(MAX-MIN)+MIN;
    float cA  = 2.*PI*amt;
    const float ang = 100.*PI/180.;
    mat3 M  = mat3(cos(-ang),sin(-ang),0., -sin(-ang),cos(-ang),0., -0.801,0.890,1.);
    mat3 RM = mat3(cos(ang), sin(ang), 0., -sin(ang), cos(ang), 0.,  0.985,0.985,1.);
    vec3 pt = M*vec3(vUv,1.);
    float yc= pt.y - amt;
    // flat front
    if(yc > CR){ gl_FragColor=A(vUv); return; }
    // behind
    if(yc < -CR){
      float shado=(1.-((-CR-yc)/amt*7.))/6.*(1.-abs(pt.x-.5));
      gl_FragColor=vec4(B(vUv).rgb-max(shado,0.),1.); return;
    }
    float hitA=(acos(clamp(yc/CR,-1.,1.))+cA)-PI;
    float hitM=mod(hitA,2.*PI);
    if((hitM>PI&&amt<.5)||(hitM>PI/2.&&amt<0.)){
      float h2=PI-(acos(clamp(yc/CR,-1.,1.))-cA);
      vec3 p2=RM*vec3(pt.x,h2/(2.*PI),1.);
      if(yc<=0.&&(p2.x<0.||p2.y<0.||p2.x>1.||p2.y>1.)){gl_FragColor=B(vUv);return;}
      if(yc>0.){gl_FragColor=A(vUv);return;}
      gl_FragColor=antialias(A(p2.xy),vec4(0.),dte(p2)); return;
    }
    vec3 p3=RM*vec3(pt.x,hitA/(2.*PI),1.);
    if(p3.x<0.||p3.y<0.||p3.x>1.||p3.y>1.){
      float h2=PI-(acos(clamp(yc/CR,-1.,1.))-cA);
      vec3 p2=RM*vec3(pt.x,h2/(2.*PI),1.);
      float shad=max((1.-dte(p2)*30.)/3.,0.)*amt;
      vec4 sc=B(vUv); if(yc<=0.) sc.rgb-=shad;
      gl_FragColor=sc; return;
    }
    // backside
    vec4 col=A(p3.xy);
    float g=(col.r+col.b+col.g)/15.+.8*(pow(1.-abs(yc/CR),.2)/2.+.5);
    col.rgb=vec3(g);
    vec4 other=yc<0.?vec4(0.,0.,0.,pow(-yc/CR,3.)*.5):A(vUv);
    gl_FragColor=antialias(col,other,CR-abs(yc));
  }`;

// ─── WebGL helpers ────────────────────────────────────────────────────────────
function createGL(canvas) {
  const gl = canvas.getContext('webgl', { alpha: false, antialias: false });
  if (!gl) throw new Error('WebGL not supported');
  return gl;
}

function compileShader(gl, type, src) {
  const s = gl.createShader(type);
  gl.shaderSource(s, src);
  gl.compileShader(s);
  if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
    console.error(gl.getShaderInfoLog(s), src);
  return s;
}

function createProgram(gl, fragBody) {
  const frag = HEAD + fragBody;
  const prog = gl.createProgram();
  gl.attachShader(prog, compileShader(gl, gl.VERTEX_SHADER, VERT));
  gl.attachShader(prog, compileShader(gl, gl.FRAGMENT_SHADER, frag));
  gl.linkProgram(prog);
  if (!gl.getProgramParameter(prog, gl.LINK_STATUS))
    console.error(gl.getProgramInfoLog(prog));
  return prog;
}

function createTexture(gl, img) {
  const t = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, t);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  return t;
}

// ─── Slider ───────────────────────────────────────────────────────────────────
const canvas    = document.getElementById('c');
const gl        = createGL(canvas);
const imgs      = [...document.querySelectorAll('.slide-img')];
const N         = imgs.length;
const dotsEl    = document.getElementById('dots');
const lblEl     = document.getElementById('lbl');
const ttlEl     = document.getElementById('ttl');
const subEl     = document.getElementById('sub');
const contentEl = document.getElementById('slide-content');
const pickerEl  = document.getElementById('picker');

let current  = 0;
let textures = [];
let programs = {};     // compiled on demand & cached
let activeShader = 'wind';
let transitioning = false;
let animRAF = null;

// fullscreen quad
const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);

// ── resize ────────────────────────────────────────────────────────────────────
function resize() {
  canvas.width  = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
  gl.viewport(0, 0, canvas.width, canvas.height);
}
window.addEventListener('resize', resize);
resize();

// ── load all images → textures ────────────────────────────────────────────────
function loadAll() {
  return Promise.all(imgs.map(img => new Promise(res => {
    if (img.complete) { textures.push(createTexture(gl, img)); res(); }
    else { img.onload = () => { textures.push(createTexture(gl, img)); res(); }; }
  })));
}

// ── get/compile program ───────────────────────────────────────────────────────
function getProgram(name) {
  if (!programs[name]) programs[name] = createProgram(gl, SHADERS[name]);
  return programs[name];
}

// ── draw one frame ────────────────────────────────────────────────────────────
function draw(fromTex, toTex, progress) {
  const prog = getProgram(activeShader);
  gl.useProgram(prog);

  // quad
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  const pos = gl.getAttribLocation(prog, 'a_pos');
  gl.enableVertexAttribArray(pos);
  gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);

  // uniforms
  gl.uniform1f(gl.getUniformLocation(prog, 'progress'), progress);
  gl.uniform2f(gl.getUniformLocation(prog, 'res'), canvas.width, canvas.height);

  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, fromTex);
  gl.uniform1i(gl.getUniformLocation(prog, 'tA'), 0);

  gl.activeTexture(gl.TEXTURE1);
  gl.bindTexture(gl.TEXTURE_2D, toTex);
  gl.uniform1i(gl.getUniformLocation(prog, 'tB'), 1);

  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}

// ── easing ────────────────────────────────────────────────────────────────────
const ease = t => t < .5 ? 2*t*t : -1+(4-2*t)*t;

// ── transition ────────────────────────────────────────────────────────────────
function goTo(next) {
  if (transitioning || next === current) return;
  if (animRAF) cancelAnimationFrame(animRAF);
  transitioning = true;

  const from = current;
  const to   = (next + N) % N;
  const DURATION = 1000;
  let start = null;

  contentEl.classList.add('fade');

  const step = ts => {
    if (!start) start = ts;
    const raw = Math.min((ts - start) / DURATION, 1);
    const p   = ease(raw);

    draw(textures[from], textures[to], p);

    if (raw < 1) { animRAF = requestAnimationFrame(step); return; }

    current = to;
    transitioning = false;
    updateUI();
    contentEl.classList.remove('fade');
  };

  requestAnimationFrame(step);
}

// ── UI ────────────────────────────────────────────────────────────────────────
function updateUI() {
  const img = imgs[current];
  lblEl.textContent = `${String(current + 1).padStart(2,'0')} / ${String(N).padStart(2,'0')}`;
  ttlEl.textContent = img.dataset.title || '';
  subEl.textContent = img.dataset.sub   || '';

  document.querySelectorAll('.dot').forEach((d, i) =>
    d.classList.toggle('active', i === current));
}

// dots
imgs.forEach((_, i) => {
  const d = document.createElement('div');
  d.className = 'dot' + (i === 0 ? ' active' : '');
  d.addEventListener('click', () => goTo(i));
  dotsEl.appendChild(d);
});

// nav
document.getElementById('prev').addEventListener('click', () => goTo(current - 1));
document.getElementById('next').addEventListener('click', () => goTo(current + 1));

// keyboard
window.addEventListener('keydown', e => {
  if (e.key === 'ArrowRight') goTo(current + 1);
  if (e.key === 'ArrowLeft')  goTo(current - 1);
});

// touch swipe
let tx0 = null;
canvas.addEventListener('touchstart', e => { tx0 = e.touches[0].clientX; }, { passive: true });
canvas.addEventListener('touchend',   e => {
  if (tx0 === null) return;
  const dx = e.changedTouches[0].clientX - tx0;
  if (Math.abs(dx) > 40) goTo(current + (dx < 0 ? 1 : -1));
  tx0 = null;
}, { passive: true });

// shader picker
Object.keys(SHADERS).forEach(name => {
  const btn = document.createElement('button');
  btn.textContent = name;
  if (name === activeShader) btn.classList.add('active');
  btn.addEventListener('click', () => {
    activeShader = name;
    document.querySelectorAll('#picker button').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    // preview: re-draw current static frame with new shader
    draw(textures[current], textures[(current + 1) % N], 0);
  });
  pickerEl.appendChild(btn);
});

// ── autoplay ──────────────────────────────────────────────────────────────────
let autoTimer = null;
function startAuto(delay = 4000) {
  stopAuto();
  autoTimer = setInterval(() => goTo(current + 1), delay);
}
function stopAuto() { clearInterval(autoTimer); }

canvas.addEventListener('mouseenter', stopAuto);
canvas.addEventListener('mouseleave', () => startAuto());

// ── boot ─────────────────────────────────────────────────────────────────────
loadAll().then(() => {
  // static first frame
  draw(textures[0], textures[1], 0);
  updateUI();
  startAuto();
});