Transform Compare Section
One source through every transform, split by a wipe you drag: a raymarched still life on the left, and on the right true Atkinson or Floyd–Steinberg diffusion, blue noise, Bayer, halftone or shape-matched ASCII.
WebGL20 deps1 file · 71 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* TransformCompareSection — one source through every transform, split by a wipe you drag.
*
* A still life is raymarched once in WebGL2. Left of the wipe it is the
* source; right of it, the transform you pick: true Atkinson or
* Floyd–Steinberg error diffusion (on the CPU, over the cell grid), blue
* noise, Bayer 8x8, a halftone screen or shape-matched ASCII. Changes
* dissolve through blue noise; cell size keys set the grain; the request
* line counts the cells. The wipe is a keyboard slider. Pass `image` to
* compare your own picture.
*
* Part of the Dither & ASCII kit: one ink, paper #f3f0e6, on a warm black
* ground #0b0b0d, with vermillion #ff4f2b as a second ink inside the
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
A features section where the feature is shown working. A still life (a ball in signal, a ring on its edge and a turned block on a cyclorama under one soft light, with soft shadows and occlusion) is raymarched once in WebGL2. A wipe divides it: to the left, the source; to the right, the transform you choose. Atkinson and Floyd–Steinberg are the real sequential algorithms, run on the CPU over the cell grid read back from the GPU, not a blurred imitation; blue noise and Bayer 8x8 are ordered dithers compared in linear light; the halftone is a rotated screen with the signal on its own angle; ASCII matches the shape of every cell. Drag the wipe anywhere on the picture or move it with the arrow keys; changing the transform dissolves through blue noise; the cell keys set the grain from 1 to 3 pixels; and a mono request line names the output and counts its cells.
Curator’s note
The Dither & ASCII kit's feature section (slot 7), cut from dither-ascii-site. Pro: the kit's WebGL2 stage with a raymarched still life rendered once, a split composite, and CPU error diffusion read back from the GPU.
