Black Hole Accretion Disc

A canvas and a module script, nothing to install. Set canvas.dataset.tps from your stream, or call canvas.token() once per token.

<canvas id="shader-black-hole-accretion" data-tps="22" data-color="#f0b86a" style="display:block;width:100%;height:240px;border-radius:12px"></canvas>
<script type="module">
  // Set canvas.dataset.tps from your stream, or call canvas.token() per token.
  const canvas = document.getElementById("shader-black-hole-accretion");
  const gl = canvas.getContext("webgl2", { alpha: false, antialias: false });
  const fragment = `#version 300 es
precision highp float;
uniform vec3 iResolution;
uniform float iTime;
uniform float uTokens;
uniform float uTps;
uniform vec3 uColor;
out vec4 outColor;
#define TAU 6.28318530718
#define PI 3.14159265359
mat2 rot(float a) { float c = cos(a), s = sin(a); return mat2(c, -s, s, c); }
float hash12(vec2 p) { vec3 q = fract(vec3(p.xyx) * 0.1031); q += dot(q, q.yzx + 33.33); return fract((q.x + q.y) * q.z); }
// a phase in radians that wraps at whole turns, so it stays precise for hours
float turn(float x, float k) { return mod(x * k, TAU); }
vec3 toLin(vec3 c) { return pow(max(c, vec3(0.0)), vec3(2.2)); }
vec3 hueShift(vec3 c, float a) {
  vec3 k = vec3(0.57735);
  float cs = cos(a);
  return max(c * cs + cross(k, c) * sin(a) + k * dot(k, c) * (1.0 - cs), vec3(0.0));
}
// ACES filmic curve, gamma and a tiny dither against banding
vec3 finish(vec3 c, vec2 fc) {
  c = max(c, vec3(0.0));
  c = clamp((c * (2.51 * c + 0.03)) / (c * (2.43 * c + 0.59) + 0.14), 0.0, 1.0);
  c = pow(c, vec3(1.0 / 2.2));
  return c + (hash12(fc) + hash12(fc + 19.19) - 1.0) / 255.0;
}

float hash13(vec3 p) { p = fract(p * 0.1031); p += dot(p, p.zyx + 31.32); return fract((p.x + p.y) * p.z); }
float vnoise(vec3 p) {
  vec3 i = floor(p), f = fract(p);
  f = f * f * (3.0 - 2.0 * f);
  return mix(mix(mix(hash13(i), hash13(i + vec3(1, 0, 0)), f.x), mix(hash13(i + vec3(0, 1, 0)), hash13(i + vec3(1, 1, 0)), f.x), f.y),
             mix(mix(hash13(i + vec3(0, 0, 1)), hash13(i + vec3(1, 0, 1)), f.x), mix(hash13(i + vec3(0, 1, 1)), hash13(i + vec3(1, 1, 1)), f.x), f.y), f.z);
}
// noise streaming along dir forever: two layers trade places so the phase can wrap
float flowNoise(vec3 p, vec3 dir, float ph) {
  float a = fract(ph), b = fract(ph + 0.5);
  float w = 1.0 - abs(2.0 * a - 1.0);
  return mix(vnoise(p - dir * b + vec3(17.3, 9.1, 4.7)), vnoise(p - dir * a), w);
}

vec3 discColor(vec3 q, vec3 v, float ph, float e, vec3 acc, out float alpha) {
  float r = length(q.xz);
  float ang = atan(q.z, q.x);
  float w = pow(2.6 / r, 1.5);
  float ta = fract(ph), tb = fract(ph + 0.5);
  float wa = 1.0 - abs(2.0 * ta - 1.0);
  float aA = ang - w * ta * 2.4;
  float aB = ang - w * tb * 2.4 + 1.7;
  float nA = 0.65 * vnoise(vec3(cos(aA) * 2.4, sin(aA) * 2.4, r * 5.0)) + 0.35 * vnoise(vec3(cos(aA) * 6.0, sin(aA) * 6.0, r * 11.0 + 3.0));
  float nB = 0.65 * vnoise(vec3(cos(aB) * 2.4, sin(aB) * 2.4, r * 5.0 + 9.0)) + 0.35 * vnoise(vec3(cos(aB) * 6.0, sin(aB) * 6.0, r * 11.0 + 21.0));
  float n = mix(nB, nA, wa);
  float edge = smoothstep(2.35, 3.0, r) * smoothstep(8.0, 4.6, r);
  float clump = mix(0.45 + 0.55 * n, smoothstep(0.35, 0.75, n) * 1.5, 0.3 + 0.6 * e);
  float dens = edge * clump;
  float heat = pow(2.7 / r, 2.0);
  vec3 tang = vec3(-sin(ang), 0.0, cos(ang));
  float beam = pow(clamp(1.0 + 0.6 * dot(tang, -v), 0.2, 2.0), 3.0);
  alpha = clamp(dens * 1.3, 0.0, 0.92);
  vec3 c = mix(acc * acc * 1.2, acc, smoothstep(0.1, 0.6, heat));
  c = mix(c, vec3(1.0, 0.95, 0.88), clamp(heat * beam * 0.35 - 0.1, 0.0, 0.75));
  return c * dens * heat * beam * (0.55 + 1.3 * e);
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
  vec3 acc = toLin(uColor);
  float e = 1.0 - exp(-uTps / 90.0);
  float ph = fract(iTime * 0.08) + fract(uTokens * 0.0024);

  vec3 ro = vec3(0.0, 2.9, -17.0);
  vec3 fw = normalize(-ro);
  vec3 rt = normalize(cross(vec3(0.0, 1.0, 0.0), fw));
  vec3 up = cross(fw, rt);
  uv *= rot(0.1);
  vec3 rd = normalize(fw * 1.62 + rt * uv.x + up * (uv.y + 0.03));

  vec3 col = vec3(0.0);
  float b = dot(ro, rd);
  float h = b * b - dot(ro, ro) + 144.0;
  vec3 v = rd;
  float rmin = 1e3;
  bool captured = false;
  // bend the ray around the hole and remember where it pierces the disc plane
  vec3 q0 = vec3(0.0), q1 = vec3(0.0), q2 = vec3(0.0);
  vec3 v0 = rd, v1 = rd, v2s = rd;
  int hits = 0;
  if (h > 0.0) {
    vec3 p = ro + rd * (-b - sqrt(h));
    vec3 L = cross(p, v);
    float h2 = dot(L, L);
    for (int i = 0; i < 64; i++) {
      float r2 = dot(p, p);
      float r = sqrt(r2);
      if (r < 1.0) { captured = true; break; }
      rmin = min(rmin, r);
      float dt = clamp(0.12 * r, 0.05, 1.4);
      vec3 vn = v - 1.5 * h2 * p / (r2 * r2 * r) * dt;
      vec3 np = p + vn * dt;
      if (p.y * np.y < 0.0) {
        vec3 q = mix(p, np, p.y / (p.y - np.y));
        if (hits == 0) { q0 = q; v0 = vn; }
        else if (hits == 1) { q1 = q; v1 = vn; }
        else if (hits == 2) { q2 = q; v2s = vn; }
        hits++;
      }
      p = np; v = vn;
      if ((r > 12.5 && dot(p, v) > 0.0) || hits > 2) break;
    }
  }
  // shade the disc crossings front to back
  float alpha = 0.0;
  for (int k = 0; k < 3; k++) {
    if (k >= hits) break;
    vec3 q = k == 0 ? q0 : (k == 1 ? q1 : q2);
    vec3 vv = k == 0 ? v0 : (k == 1 ? v1 : v2s);
    float rq = length(q.xz);
    if (rq > 2.2 && rq < 8.2) {
      float a;
      vec3 dc = discColor(q, normalize(vv), ph, e, acc, a);
      col += (1.0 - alpha) * dc * a;
      alpha += (1.0 - alpha) * a;
    }
  }
  if (!captured) {
    // a thin photon ring and a faint lensed starfield
    col += (1.0 - alpha) * mix(acc, vec3(1.0), 0.5) * exp(-abs(rmin - 1.56) * 26.0) * (0.3 + 0.6 * e);
    vec3 sv = normalize(v) * 70.0;
    vec3 id = floor(sv);
    float star = smoothstep(0.975, 1.0, hash13(id)) * exp(-dot(fract(sv) - 0.5, fract(sv) - 0.5) * 90.0);
    col += (1.0 - alpha) * (vec3(0.5) + acc * 0.5) * star * 0.4;
    col += (1.0 - alpha) * acc * 0.01;
  }
  fragColor = vec4(finish(col, fragCoord), 1.0);
}

void main() {
  mainImage(outColor, gl_FragCoord.xy);
  outColor.a = 1.0;
}
`;
  const vertex = `#version 300 es
void main() {
  vec2 p = vec2((gl_VertexID << 1) & 2, gl_VertexID & 2);
  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
}
`;
  const compile = (type, src) => {
    const s = gl.createShader(type);
    gl.shaderSource(s, src);
    gl.compileShader(s);
    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
    return s;
  };
  const program = gl.createProgram();
  gl.attachShader(program, compile(gl.VERTEX_SHADER, vertex));
  gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragment));
  gl.linkProgram(program);
  gl.useProgram(program);
  const u = (n) => gl.getUniformLocation(program, n);
  const [res, time, tokens, rate, color] = ["iResolution", "iTime", "uTokens", "uTps", "uColor"].map(u);
  const hex = parseInt((canvas.dataset.color || "#7c5cff").slice(1), 16);
  gl.uniform3f(color, ((hex >> 16) & 255) / 255, ((hex >> 8) & 255) / 255, (hex & 255) / 255);

  // canvas.token(): count real tokens and derive the rate from the last second.
  const stamps = [];
  canvas.token = () => {
    stamps.push(performance.now());
    canvas.dataset.tps = "auto";
  };
  const still = matchMedia("(prefers-reduced-motion: reduce)").matches;
  let count = 0, last = performance.now(), visible = true, frame = 0;
  new IntersectionObserver(([e]) => {
    visible = e.isIntersecting;
    if (visible && !frame) frame = requestAnimationFrame(draw);
  }).observe(canvas);

  function draw(now) {
    frame = 0;
    const dt = Math.min((now - last) / 1000, 0.1);
    last = now;
    while (stamps.length && now - stamps[0] > 1000) stamps.shift();
    const wobble = 1 + 0.25 * Math.sin(now / 588) + 0.15 * Math.sin(now / 233 + 1) + 0.08 * Math.sin(now / 91 + 2);
    const tps = canvas.dataset.tps === "auto" ? stamps.length : Number(canvas.dataset.tps) * wobble;
    count += tps * dt;
    const dpr = Math.min(devicePixelRatio || 1, 2);
    const w = Math.round(canvas.clientWidth * dpr), h = Math.round(canvas.clientHeight * dpr);
    if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; }
    gl.viewport(0, 0, w, h);
    gl.uniform3f(res, w, h, 1);
    gl.uniform1f(time, still ? 2 : now / 1000);
    gl.uniform1f(tokens, still ? Number(canvas.dataset.tps) * 2 : count);
    gl.uniform1f(rate, tps);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    if (visible && !still) frame = requestAnimationFrame(draw);
  }
  frame = requestAnimationFrame(draw);
</script>

// Inputs the site passes in, as constants for Shadertoy.
// uTps: tokens per second. uTokens: tokens so far. uColor: the accent.
#define uTps 22.0
#define uTokens (iTime * uTps)
#define uColor vec3(0.941, 0.722, 0.416)

#define TAU 6.28318530718
#define PI 3.14159265359
mat2 rot(float a) { float c = cos(a), s = sin(a); return mat2(c, -s, s, c); }
float hash12(vec2 p) { vec3 q = fract(vec3(p.xyx) * 0.1031); q += dot(q, q.yzx + 33.33); return fract((q.x + q.y) * q.z); }
// a phase in radians that wraps at whole turns, so it stays precise for hours
float turn(float x, float k) { return mod(x * k, TAU); }
vec3 toLin(vec3 c) { return pow(max(c, vec3(0.0)), vec3(2.2)); }
vec3 hueShift(vec3 c, float a) {
  vec3 k = vec3(0.57735);
  float cs = cos(a);
  return max(c * cs + cross(k, c) * sin(a) + k * dot(k, c) * (1.0 - cs), vec3(0.0));
}
// ACES filmic curve, gamma and a tiny dither against banding
vec3 finish(vec3 c, vec2 fc) {
  c = max(c, vec3(0.0));
  c = clamp((c * (2.51 * c + 0.03)) / (c * (2.43 * c + 0.59) + 0.14), 0.0, 1.0);
  c = pow(c, vec3(1.0 / 2.2));
  return c + (hash12(fc) + hash12(fc + 19.19) - 1.0) / 255.0;
}

float hash13(vec3 p) { p = fract(p * 0.1031); p += dot(p, p.zyx + 31.32); return fract((p.x + p.y) * p.z); }
float vnoise(vec3 p) {
  vec3 i = floor(p), f = fract(p);
  f = f * f * (3.0 - 2.0 * f);
  return mix(mix(mix(hash13(i), hash13(i + vec3(1, 0, 0)), f.x), mix(hash13(i + vec3(0, 1, 0)), hash13(i + vec3(1, 1, 0)), f.x), f.y),
             mix(mix(hash13(i + vec3(0, 0, 1)), hash13(i + vec3(1, 0, 1)), f.x), mix(hash13(i + vec3(0, 1, 1)), hash13(i + vec3(1, 1, 1)), f.x), f.y), f.z);
}
// noise streaming along dir forever: two layers trade places so the phase can wrap
float flowNoise(vec3 p, vec3 dir, float ph) {
  float a = fract(ph), b = fract(ph + 0.5);
  float w = 1.0 - abs(2.0 * a - 1.0);
  return mix(vnoise(p - dir * b + vec3(17.3, 9.1, 4.7)), vnoise(p - dir * a), w);
}

vec3 discColor(vec3 q, vec3 v, float ph, float e, vec3 acc, out float alpha) {
  float r = length(q.xz);
  float ang = atan(q.z, q.x);
  float w = pow(2.6 / r, 1.5);
  float ta = fract(ph), tb = fract(ph + 0.5);
  float wa = 1.0 - abs(2.0 * ta - 1.0);
  float aA = ang - w * ta * 2.4;
  float aB = ang - w * tb * 2.4 + 1.7;
  float nA = 0.65 * vnoise(vec3(cos(aA) * 2.4, sin(aA) * 2.4, r * 5.0)) + 0.35 * vnoise(vec3(cos(aA) * 6.0, sin(aA) * 6.0, r * 11.0 + 3.0));
  float nB = 0.65 * vnoise(vec3(cos(aB) * 2.4, sin(aB) * 2.4, r * 5.0 + 9.0)) + 0.35 * vnoise(vec3(cos(aB) * 6.0, sin(aB) * 6.0, r * 11.0 + 21.0));
  float n = mix(nB, nA, wa);
  float edge = smoothstep(2.35, 3.0, r) * smoothstep(8.0, 4.6, r);
  float clump = mix(0.45 + 0.55 * n, smoothstep(0.35, 0.75, n) * 1.5, 0.3 + 0.6 * e);
  float dens = edge * clump;
  float heat = pow(2.7 / r, 2.0);
  vec3 tang = vec3(-sin(ang), 0.0, cos(ang));
  float beam = pow(clamp(1.0 + 0.6 * dot(tang, -v), 0.2, 2.0), 3.0);
  alpha = clamp(dens * 1.3, 0.0, 0.92);
  vec3 c = mix(acc * acc * 1.2, acc, smoothstep(0.1, 0.6, heat));
  c = mix(c, vec3(1.0, 0.95, 0.88), clamp(heat * beam * 0.35 - 0.1, 0.0, 0.75));
  return c * dens * heat * beam * (0.55 + 1.3 * e);
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
  vec3 acc = toLin(uColor);
  float e = 1.0 - exp(-uTps / 90.0);
  float ph = fract(iTime * 0.08) + fract(uTokens * 0.0024);

  vec3 ro = vec3(0.0, 2.9, -17.0);
  vec3 fw = normalize(-ro);
  vec3 rt = normalize(cross(vec3(0.0, 1.0, 0.0), fw));
  vec3 up = cross(fw, rt);
  uv *= rot(0.1);
  vec3 rd = normalize(fw * 1.62 + rt * uv.x + up * (uv.y + 0.03));

  vec3 col = vec3(0.0);
  float b = dot(ro, rd);
  float h = b * b - dot(ro, ro) + 144.0;
  vec3 v = rd;
  float rmin = 1e3;
  bool captured = false;
  // bend the ray around the hole and remember where it pierces the disc plane
  vec3 q0 = vec3(0.0), q1 = vec3(0.0), q2 = vec3(0.0);
  vec3 v0 = rd, v1 = rd, v2s = rd;
  int hits = 0;
  if (h > 0.0) {
    vec3 p = ro + rd * (-b - sqrt(h));
    vec3 L = cross(p, v);
    float h2 = dot(L, L);
    for (int i = 0; i < 64; i++) {
      float r2 = dot(p, p);
      float r = sqrt(r2);
      if (r < 1.0) { captured = true; break; }
      rmin = min(rmin, r);
      float dt = clamp(0.12 * r, 0.05, 1.4);
      vec3 vn = v - 1.5 * h2 * p / (r2 * r2 * r) * dt;
      vec3 np = p + vn * dt;
      if (p.y * np.y < 0.0) {
        vec3 q = mix(p, np, p.y / (p.y - np.y));
        if (hits == 0) { q0 = q; v0 = vn; }
        else if (hits == 1) { q1 = q; v1 = vn; }
        else if (hits == 2) { q2 = q; v2s = vn; }
        hits++;
      }
      p = np; v = vn;
      if ((r > 12.5 && dot(p, v) > 0.0) || hits > 2) break;
    }
  }
  // shade the disc crossings front to back
  float alpha = 0.0;
  for (int k = 0; k < 3; k++) {
    if (k >= hits) break;
    vec3 q = k == 0 ? q0 : (k == 1 ? q1 : q2);
    vec3 vv = k == 0 ? v0 : (k == 1 ? v1 : v2s);
    float rq = length(q.xz);
    if (rq > 2.2 && rq < 8.2) {
      float a;
      vec3 dc = discColor(q, normalize(vv), ph, e, acc, a);
      col += (1.0 - alpha) * dc * a;
      alpha += (1.0 - alpha) * a;
    }
  }
  if (!captured) {
    // a thin photon ring and a faint lensed starfield
    col += (1.0 - alpha) * mix(acc, vec3(1.0), 0.5) * exp(-abs(rmin - 1.56) * 26.0) * (0.3 + 0.6 * e);
    vec3 sv = normalize(v) * 70.0;
    vec3 id = floor(sv);
    float star = smoothstep(0.975, 1.0, hash13(id)) * exp(-dot(fract(sv) - 0.5, fract(sv) - 0.5) * 90.0);
    col += (1.0 - alpha) * (vec3(0.5) + acc * 0.5) * star * 0.4;
    col += (1.0 - alpha) * acc * 0.01;
  }
  fragColor = vec4(finish(col, fragCoord), 1.0);
}

Similar shaders