Darkroom — Lab — Carter Ogunsola

Press and hold to develop a print. The image blooms through the halftone screen in dither blots, like paper in a developer bath — release early and it un-develops, hold to the end and it fixes. Click a fixed print to bleach it back.

Paper in the bath

A darkroom print doesn’t fade in. It blooms — patches of the image surface first where the developer grabs, then the rest catches up, and at some point you pull the paper or you lose it. This is that, with the site’s own halftone screen standing in for silver: hold to develop, let go early and the image sinks back to blank stock, hold the full second and it fixes.

One threshold per point

The develop is a single dither bloom. A noise field assigns every point a threshold; as the develop value climbs, each point surfaces the moment it’s passed — soft-edged by ±0.22 so blots grow instead of popping. The first build crossed this with a bottom-up bath-line wipe for direction. Cut it: the pure blots read more like developer grabbing paper, and a directional sweep just told you where to look.

The hold, borrowed whole

The interaction is watson.la’s Hold, kept intact because the numbers are right: a 3px bar fills linearly over one second — linear on purpose, a progress readout shouldn’t ease — and an early release rewinds with power2.out over a duration proportional to how far you got. Finish, and the bar exits stage-right with its fill intact instead of fading. Once fixed, a hold won’t restart it; a plain click bleaches back to stock. That little asymmetry is the two-step latch: completing and undoing should never share a gesture.

Would you gate real content behind this? Probably not. But as a way to make someone earn an image for one second, it’s oddly satisfying.

The moving parts

hold — ms to full develop, 1000. The bar and the bath share it.
pitch — halftone dot pitch in device px, 5. Matches the site’s print.
patch — how blotchy the developer is, 0–1. Zero is a clean sweep.

Credits

Aristide Benoist — the hold-fill-rewind mechanic, from watson.la

Setup

<!-- GSAP (from CDN) -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>

<!-- Site tokens the styles use — swap freely -->
<style>
  :root {
    --font-mono: "Geist Mono", ui-monospace, monospace;
    --fs-mono-meta: 0.75rem;
    --ink: #1e1e1e;
    --ink-muted: rgba(30, 30, 30, 0.6);
  }
</style>

<!-- Sized stage — the script fills it -->
<div class="stage" style="position: relative; height: 100vh;"></div>

Script

import { previewUrl } from "@/config/assets";
const IMG_KEY = "dts/unwrapped/DTS_Unwrapped_by_FRANCO_DUPUY_19.jpg";
const DEFAULTS = {
  hold: 1e3,

  pitch: 5,

  patch: 0.5

};
export const config = {
  hold: [1e3, 300, 3e3, 50],
  pitch: [5, 3, 12, 0.5],
  patch: [0.5, 0, 1, 0.01]
};
const VERT = `#version 300 es
out vec2 vUv;
void main() {
  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
  vUv = p;
  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
}`;
const FRAG = `#version 300 es
precision highp float;
uniform sampler2D uImg;
uniform vec2 uRes;
uniform vec2 uImgRes;
uniform float uDev;    // develop 0..1
uniform float uPitch;
uniform float uPatch;
uniform vec3 uPaper;
uniform vec3 uInk;
in vec2 vUv;
out vec4 outColor;

float hash(vec2 p) {
  p = fract(p * vec2(123.34, 456.21));
  p += dot(p, p + 45.32);
  return fract(p.x * p.y);
}
float vnoise(vec2 p) {
  vec2 i = floor(p), f = fract(p);
  vec2 u = f * f * (3.0 - 2.0 * f);
  return mix(
    mix(hash(i), hash(i + vec2(1, 0)), u.x),
    mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), u.x),
    u.y
  );
}

void main() {
  // object-fit: cover crop.
  float rc = uRes.x / uRes.y;
  float ri = uImgRes.x / uImgRes.y;
  vec2 uv = vUv;
  if (rc > ri) { float s = ri / rc; uv.y = (uv.y - 0.5) * s + 0.5; }
  else { float s = rc / ri; uv.x = (uv.x - 0.5) * s + 0.5; }
  uv.y = 1.0 - uv.y;
  float gray = dot(texture(uImg, uv).rgb, vec3(0.299, 0.587, 0.114));

  // The print: house 45-degree halftone screen, dots swelling in the darks.
  mat2 R45 = mat2(0.7071, 0.7071, -0.7071, 0.7071);
  vec2 hp = (R45 * (vUv * uRes)) / uPitch;
  float cellD = length(fract(hp) - 0.5);
  float dotR = mix(0.62, 0.06, gray);
  float ht = smoothstep(dotR + 0.14, dotR - 0.14, cellD);
  vec3 printed = mix(uPaper, uInk, ht);

  float th = vnoise(vUv * vec2(6.0, 4.0) * (0.5 + uPatch));
  // Rising edges: a point develops once uDev PASSES its noise threshold —
  // the whole reveal is this one dither bloom, no directional wipe (tried a
  // bath-line sweep; the pure blots read better). At uDev 0 every point sits
  // below its threshold; at 1 every point has passed it.
  // NB "patch" is a GLSL reserved word.
  float developed = smoothstep(th - 0.22, th + 0.22, uDev * 1.5 - 0.25);

  // Undeveloped paper carries a whisper of tooth so it reads as stock.
  vec3 paper = uPaper + (hash(vUv * uRes * 1.013) - 0.5) * 0.02;
  outColor = vec4(mix(paper, printed, developed), 1.0);
}`;
let styled = false;
function injectStyle() {
  if (styled) return;
  styled = true;
  const s = document.createElement("style");
  s.dataset.labStyle = "darkroom";
  s.textContent = `
  .dk { position: absolute; inset: 0; cursor: pointer; user-select: none; -webkit-user-drag: none; }
  .dk__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .dk__bar { position: absolute; inset-inline: 0; inset-block-start: 0; height: 3px; overflow: hidden; }
  .dk__bar i { position: absolute; inset: 0; background: var(--ink); transform: translate3d(-100.5%, 0, 0); }
  .dk__cap { position: absolute; inset-inline-start: var(--s-16); inset-block-end: var(--s-12);
    font-family: var(--font-mono); font-size: var(--fs-mono-meta); letter-spacing: 0.06em;
    color: var(--ink-muted); text-transform: uppercase; }
  `;
  document.head.append(s);
}
const experiment = {
  mount(root) {
    injectStyle();
    const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
    const P = { ...DEFAULTS };
    const wrap = document.createElement("div");
    wrap.className = "dk";
    wrap.innerHTML = `
      <canvas class="dk__canvas" aria-hidden="true"></canvas>
      <div class="dk__bar" aria-hidden="true"><i></i></div>
      <span class="dk__cap">HOLD::DEVELOP</span>`;
    root.append(wrap);
    const canvas = wrap.querySelector(".dk__canvas");
    const fill = wrap.querySelector(".dk__bar i");
    const cap = wrap.querySelector(".dk__cap");
    const gl = canvas.getContext("webgl2", { alpha: false, antialias: false });
    if (!gl) return () => wrap.remove();
    const sh = (t, src) => {
      const s = gl.createShader(t);
      gl.shaderSource(s, src);
      gl.compileShader(s);
      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
        console.warn("[darkroom]", gl.getShaderInfoLog(s));
      return s;
    };
    const prog = gl.createProgram();
    gl.attachShader(prog, sh(gl.VERTEX_SHADER, VERT));
    gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, FRAG));
    gl.linkProgram(prog);
    gl.useProgram(prog);
    const u = {};
    for (const n of ["uImg", "uRes", "uImgRes", "uDev", "uPitch", "uPatch", "uPaper", "uInk"])
      u[n] = gl.getUniformLocation(prog, n);
    const inks = () => {
      const cs = getComputedStyle(document.documentElement);
      const parse = (v) => {
        const m = v.trim().match(/^#([0-9a-f]{6})$/i)?.[1];
        if (!m) return [0.5, 0.5, 0.5];
        return [0, 2, 4].map((i) => parseInt(m.slice(i, i + 2), 16) / 255);
      };
      return { paper: parse(cs.getPropertyValue("--paper")), ink: parse(cs.getPropertyValue("--ink")) };
    };
    let imgW = 1;
    let imgH = 1;
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.src = previewUrl(IMG_KEY, 1440);
    img.decode().then(() => {
      imgW = img.naturalWidth;
      imgH = img.naturalHeight;
      const tex = gl.createTexture();
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, tex);
      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);
      render();
    }).catch(() => {
    });
    const size = () => {
      const dpr = Math.min(devicePixelRatio || 1, 1.5);
      const r = wrap.getBoundingClientRect();
      canvas.width = Math.max(1, Math.round(r.width * dpr));
      canvas.height = Math.max(1, Math.round(r.height * dpr));
      gl.viewport(0, 0, canvas.width, canvas.height);
      render();
    };
    const ro = new ResizeObserver(size);
    ro.observe(wrap);
    const state = { p: 0 };
    let holding = false;
    let fixed = false;
    const render = () => {
      const { paper, ink } = inks();
      gl.uniform1i(u.uImg, 0);
      gl.uniform2f(u.uRes, canvas.width, canvas.height);
      gl.uniform2f(u.uImgRes, imgW, imgH);
      gl.uniform1f(u.uDev, state.p);
      gl.uniform1f(u.uPitch, P.pitch * Math.min(devicePixelRatio || 1, 1.5));
      gl.uniform1f(u.uPatch, P.patch);
      gl.uniform3fv(u.uPaper, paper);
      gl.uniform3fv(u.uInk, ink);
      gl.drawArrays(gl.TRIANGLES, 0, 3);
    };
    const bar = (p) => {
      fill.style.transform = `translate3d(${-100.5 + p * 100.5}%, 0, 0)`;
    };
    let last = 0;
    const tick = () => {
      const now = performance.now();
      const dt = Math.min((now - last) / 1e3, 0.05);
      last = now;
      if (holding && !fixed) {
        state.p = Math.min(1, state.p + dt * 1e3 / P.hold);
        bar(state.p);
        render();
        if (state.p >= 1) fix();
      }
    };
    const startTicker = () => {
      last = performance.now();
      gsap.ticker.add(tick);
    };
    const stopTicker = () => gsap.ticker.remove(tick);
    const fix = () => {
      fixed = true;
      holding = false;
      stopTicker();
      cap.textContent = "FIXED::PRINT — CLICK::BLEACH";
      gsap.to(fill, { xPercent: 201, duration: 1, ease: "expo.out" });
    };
    const rewind = () => {
      stopTicker();
      gsap.to(state, {
        p: 0,
        duration: state.p,

        ease: "power2.out",
        onUpdate: () => {
          bar(state.p);
          render();
        }
      });
    };
    const bleach = () => {
      fixed = false;
      cap.textContent = "HOLD::DEVELOP";
      gsap.set(fill, { xPercent: 0 });
      gsap.to(state, {
        p: 0,
        duration: 0.8,
        ease: "power2.inOut",
        onUpdate: () => {
          bar(state.p);
          render();
        }
      });
    };
    const down = (e) => {
      e.preventDefault();
      if (fixed) return;
      if (reduced) {
        state.p = 1;
        bar(1);
        render();
        fix();
        return;
      }
      holding = true;
      gsap.killTweensOf(state);
      startTicker();
    };
    const up = () => {
      if (fixed) {
        if (!holding) bleach();
        return;
      }
      if (!holding) return;
      holding = false;
      stopTicker();
      if (reduced) return;
      rewind();
    };
    wrap.addEventListener("pointerdown", down);
    window.addEventListener("pointerup", up);
    wrap.addEventListener("keydown", (e) => {
      if (e.key === " " && !e.repeat) down(e);
    });
    wrap.addEventListener("keyup", (e) => {
      if (e.key === " ") up();
    });
    wrap.tabIndex = 0;
    return {
      destroy() {
        stopTicker();
        gsap.killTweensOf([state, fill]);
        window.removeEventListener("pointerup", up);
        ro.disconnect();
        gl.getExtension("WEBGL_lose_context")?.loseContext();
        wrap.remove();
      },
      set(key, value) {
        if (key in P) P[key] = Number(value);
        render();
      }
    };
  }
};
experiment.mount(document.querySelector(".stage"));

Darkroom

Canvas New

Experiment coming soon Loading experiment

Darkroom — Lab experiment