ASCII Field

"use client";

import { useEffect, useRef, useState } from "react";
import { ShaderSurface, type ShaderBackgroundProps, type Prepass } from "../_shader-background/ShaderSurface";
import { paletteOf, type ShadeStep } from "../_shader-background/shades";

// A slow field of light drawn as type: the page is split into a grid of character cells, and each
// cell shows the glyph from `characters` that matches how bright the field is there, tinted with
// the same ramp. Sparse marks fade into the page, dense ones carry the colour, and a faint glow sits
// under the busiest areas so the grid blends in rather than sitting on top. The pointer brings a lens
// that enlarges the field under it and leaves a fading wake of reshuffled type; a click sends a ring
// of type outward.

// glyph cells in the atlas, texels; width over height matches the cells on screen
const ATLAS_W = 60;
const ATLAS_H = 96;
const ASPECT = ATLAS_W / ATLAS_H;

const SHADER = /* glsl */ `
uniform sampler2D u_tex; // glyph atlas: one row of cells, white on black
uniform float u_glyphs;  // glyphs in the atlas
uniform float u_cell;    // row height, css px
uniform float u_scale;   // size of the shapes
uniform float u_density; // how much of the field carries glyphs