Sprite sheet Dithering
Generative Art / GLSL Shaders / p5.js / Web Interface
Context & Objective
Developed as part of an audiovisual exploration into the dissolution of the individuality within the digital biosphere. This project required a performant tool to use custom animated sprite sheets to apply dithering over existing footage or a live video feed, bringing a new life to a classical technique. A custom web interface and GLSL shaders make the modulation of crucial parameters intuitive, allowing artistic control in real-time.
Technical Architecture & Data Flow
A p5.js sketch is used to bundle the Web UI with shader image processing, rendering the image using a p5.js canvas. A custom Web UI exposes real-time parameters including: pixel size, image resolution, sprite sheet selection, order and colors, input source, and image correction settings. Parameters are then passed to GLSL shaders in real time to apply image correction and the animated sprite sheet dithering algorithms.
UI demonstration
UI demonstration
Core Logic
Sprite sheets are passed as a single texture atlas to the shader. Input images are divided into regions and center brightness is computed for each region. UVs are remapped to fit each region. The sprite sheet atlas is sampled based on current frame time, calculated region brightness, and localized UV coordinates.
Region UV re-mapping
UV re-mapping and sprite sheet atlas frame sampling
Below is a demonstration of the live Web UI controlling GLSL parameters in real time, followed by the visual output across different animated sprite sheet configurations. Access the project website for your own experiments in this link.
Render example
UI demonstration
Render example