CSSとJSで作る、ドラッグできるガラスの屈折エフェクト

(() => {
    const PIC = 480, ESCAPE = 100, STAGE = 680, SCALE = 160, OVER = 2;
    function lensField(d, bend, mag) {
      const S = Math.max(2, Math.round(d));
      const R = S / 2;
      const ox = new Float32Array(S * S);
      const oy = new Float32Array(S * S);

      const out = 0.14 + (bend / 100) * 0.8;

      const q = 3;
      const f = (u) => u / mag + (out + 1 - 1 / mag) * Math.pow(u, q);

      for (let y = 0; y < S; y++) {
        for (let x = 0; x < S; x++) {
          const i = y * S + x;
          const dx = x - R + 0.5;
          const dy = y - R + 0.5;
          const r = Math.hypot(dx, dy);
          if (r < R) {
            const u = r / R;
            const rs = R * f(u);
            const ux = r ? dx / r : 0;
            const uy = r ? dy / r : 0;
            ox[i] = ux * (rs - r);
            oy[i] = uy * (rs - r);
          }
        }
      }
      return { S, ox, oy };
    }

    function lensMap(d, bend, mag) {
      const { S, ox, oy } = lensField(d, bend, mag);
      const c = document.createElement("canvas");
      c.width = c.height = S;
      const g = c.getContext("2d");
      if (!g) return "";
      const img = g.createImageData(S, S);

      for (let i = 0; i < S * S; i++) {
        const j = i * 4;

        img.data[j] = Math.max(0, Math.min(255, 127.5 + (ox[i] / SCALE) * 255));
        img.data[j + 1] = Math.max(0, Math.min(255, 127.5 + (oy[i] / SCALE) * 255));
        img.data[j + 2] = 128;
        img.data[j + 3] = 255;
      }
      g.putImageData(img, 0, 0);
      return c.toDataURL();
    }


    const root = document.getElementById("kumonosu-root");
    const stage = root.querySelector(".kumonosu-cow");
    const bubble = root.querySelector(".kumonosu-cow-bub");
    const photo = root.querySelector(".kumonosu-cow-pic");
    const d = matchMedia("(max-width: 760px)").matches ? 210 : 180;
    const chase = 0.018;
    const at = { x: ESCAPE + PIC * 0.30, y: ESCAPE + PIC * 0.14 };
    const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
    let grab = null;
    let draw = () => {};
    bubble.style.width = bubble.style.height = `${d}px`;

    function fit() {
      stage.style.setProperty("--kumonosu-scale", Math.min(1, root.clientWidth / STAGE, root.clientHeight / STAGE));
    }
    new ResizeObserver(fit).observe(root);
    fit();

    function render() {
      bubble.style.translate = `${at.x.toFixed(1)}px ${at.y.toFixed(1)}px`;
      bubble.setAttribute("aria-valuenow", Math.round(at.x / (STAGE - d) * 100));
      bubble.setAttribute("aria-valuetext", `${Math.round(at.x / (STAGE - d) * 100)} across, ${Math.round(at.y / (STAGE - d) * 100)} down`);
      draw();
    }

    if (CSS.supports("backdrop-filter", "url(#kumonosu-cow-lens)")) {
      const map = root.querySelector("feImage");
      map.setAttribute("href", lensMap(d, 100, 1.30));
      map.setAttribute("width", d);
      map.setAttribute("height", d);
      bubble.style.backdropFilter = "url(#kumonosu-cow-lens) saturate(1.12) brightness(1.04)";
    } else {
      const canvas = document.createElement("canvas");
      canvas.className = "kumonosu-cow-glass";
      canvas.setAttribute("aria-hidden", "true");
      const field = lensField(d, 100, 1.30);
      const S = field.S * OVER, R = S / 2, W = STAGE * OVER;
      canvas.width = canvas.height = S;
      bubble.append(canvas);
      const g = canvas.getContext("2d");
      const out = g.createImageData(S, S);
      const ks = [1 + chase, 1, 1 - chase];
      const img = new Image();
      img.crossOrigin = "anonymous";
      img.onload = () => {
        try {
          const source = document.createElement("canvas");
          source.width = source.height = W;
          const context = source.getContext("2d", { willReadFrequently: true });
          const side = Math.min(img.naturalWidth, img.naturalHeight);
          context.drawImage(img, (img.naturalWidth - side) / 2, (img.naturalHeight - side) / 2, side, side, ESCAPE * OVER, ESCAPE * OVER, PIC * OVER, PIC * OVER);
          const src = context.getImageData(0, 0, W, W);
          draw = () => {
        for (let y = 0; y < S; y++) {
          for (let x = 0; x < S; x++) {
            const o = (y * S + x) * 4;
            const cx = x - R + 0.5;
            const cy = y - R + 0.5;
            if (cx * cx + cy * cy >= R * R) { out.data[o + 3] = 0; continue; }
            const fi = ((y / OVER) | 0) * field.S + ((x / OVER) | 0);
            let lit = 0;
            for (let ch = 0; ch < 3; ch++) {
              const sx = (at.x * OVER + x + field.ox[fi] * ks[ch] * OVER) | 0;
              const sy = (at.y * OVER + y + field.oy[fi] * ks[ch] * OVER) | 0;
              if (sx < 0 || sy < 0 || sx >= W || sy >= W) { out.data[o + ch] = 0; continue; }
              const v = src.data[(sy * W + sx) * 4 + ch];
              out.data[o + ch] = v;
              lit += v;
            }

            out.data[o + 3] = lit > 0 ? 255 : 0;
          }
        }
        g.putImageData(out, 0, 0);

          };
          render();
        } catch (error) {
          console.error("Unable to read image pixels for glass refraction.", error);
        }
      };
      img.onerror = () => console.error("Unable to load image for glass refraction.");
      img.src = photo.src;
    }

    function pointerPosition(e) {
      const bounds = stage.getBoundingClientRect();
      const scale = bounds.width / STAGE;
      return { x: (e.clientX - bounds.left) / scale, y: (e.clientY - bounds.top) / scale };
    }
    bubble.addEventListener("pointerdown", (e) => {
      if (grab || e.button !== 0) return;
      const p = pointerPosition(e);
      grab = { id: e.pointerId, dx: p.x - at.x, dy: p.y - at.y };
      bubble.setPointerCapture(e.pointerId);
      bubble.setAttribute("data-held", "");
    });
    bubble.addEventListener("pointermove", (e) => {
      if (!grab || grab.id !== e.pointerId) return;
      const p = pointerPosition(e);
      at.x = clamp(p.x - grab.dx, 0, STAGE - d);
      at.y = clamp(p.y - grab.dy, 0, STAGE - d);
      render();
    });
    function release(e) {
      if (!grab || grab.id !== e.pointerId) return;
      grab = null;
      bubble.removeAttribute("data-held");
      if (bubble.hasPointerCapture(e.pointerId)) bubble.releasePointerCapture(e.pointerId);
    }
    for (const event of ["pointerup", "pointercancel", "lostpointercapture"]) bubble.addEventListener(event, release);
    bubble.addEventListener("keydown", (e) => {
      const step = e.shiftKey ? 36 : 12;
      const go = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] }[e.key];
      if (!go) return;
      e.preventDefault();
      at.x = clamp(at.x + go[0], 0, STAGE - d);
      at.y = clamp(at.y + go[1], 0, STAGE - d);
      render();
    });
    render();
  })();